js上一個下一個左右滾動實現
.outerdiv { width: 100%; } .innerdiv{ white-space: nowrap; width:70px; height: 70px; border:1px solid green; overflow: hidden; float:left; } .outerdiv ul { width: 1000px; } .outerdiv ul li { white-space: nowrap; font-size: 14px; float:left; } .outerdiv ul li { width: 50px; height: 50px; margin: 10px 10px ; } .outerdiv ul li:nth-child(2n) { background-color: red; } .outerdiv ul li:nth-child(2n+1){ background-color: cornflowerblue; } .outerdiv ul li:last-child{ background-color: transparent; } .leftdiv{ height:70px; float: left; margin-right: 50px; } .rightdiv{ height: 70px; float: left; margin-left:50px; } .centerdiv{ height: 70px; width: 600px; margin: 30px auto; } </style> </head> <body> <div class="outerdiv"> <div class="centerdiv"> <div class="leftdiv"> <input type="button" name="pre" value="pre"> </div> <div class="innerdiv"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li></li> </ul> </div> <div class="rightdiv"> <input type="button" name="next" value="next"> </div> </div> </div> <script src="../js/libs/jquery-1.11.3.js"> </script> <script src="../js/libs/jquery.almvalidate.js"></script> <script> var scrollWidth = $("div.innerdiv").get(0).scrollWidth; $("[name=pre]").bind("click",function(){ //多增加li 錯位處理 var left = $("div.innerdiv").get(0).scrollLeft; var width = $("div.innerdiv").width(); var scrollWidth = $("div.innerdiv").get(0).scrollWidth-width; if(left + width >= scrollWidth){ $("div.innerdiv").animate({"scrollLeft":0},500); }else{ $("div.innerdiv").animate({"scrollLeft":left+width},500); } }); $("[name=next]").bind("click",function(){ var left = $("div.innerdiv").get(0).scrollLeft; var width = $("div.innerdiv").width(); var maxLeft = $("div.innerdiv").get(0).scrollWidth - width*2; var justLeft = maxLeft+10; //10 是margin值 if(left == 0){ $("div.innerdiv").animate({"scrollLeft":justLeft},500); }else{ $("div.innerdiv").animate({"scrollLeft":left-width},500); } }); </script>
相關推薦
js上一個下一個左右滾動實現
.outerdiv { width: 100%; } .innerdiv{ white-space: nowrap; width:70
JS/JQuery獲取當前元素的上一個/下一個兄弟級元素等元素的方法
input logs type ron put 綁定 style wid cti $(function(){ //遍歷獲取的input元素對象數組,綁定click事件 var len = $("input[type=‘file‘]").length;
js jquery獲取當前元素的兄弟級 上一個 下一個元素 jquery如何獲取第一個或最後一個子元素
pre tool 處理 語法 exp iou 元素 dex syn var chils= s.childNodes; //得到s的全部子節點 var par=s.parentNode; //得到s的父節點 var ns=s.nextSbiling; //獲得s的下
java實現List集合中獲取上一個下一個元素
public static void main(String[] args) { List<Integer> list = new ArrayList<Integer>(); list.add(1); list.add(2); lis
Javascript JQuery獲取當前元素的兄弟元素/上一個/下一個元素(轉)
var chils= s.childNodes; //得到s的全部子節點 var par=s.parentNode; //得到s的父節點 var ns=s.nextSbiling; //獲得s的下一個兄弟節點 var ps=s.previousSbiling; //得到s的上一個兄弟節點 var fc=s
解決iscroll.js上拉下拉重新整理手指劃出螢幕頁面無法回彈問題
使用過iscroll.js的上拉下拉重新整理效果的朋友應該都碰到過這個問題:在iOS的瀏覽器中,上拉或下拉重新整理時,當手指劃出屏幕後,頁面無法彈回。很多人因為解決不了這個問題,乾脆就那樣不解決了,還有的直接就不用HTML了,使用原生代替HTML頁面。 相信很多朋友也有
JS中在當前日期上追加一天或者獲取上一個月和下一個月
ren days 月的天數 rem () split color 測試 -1 /** * 獲取上一個月 * * @date 格式為yyyy-mm-dd的日期,如:2014-01-25 */
js計算當前日期上一個月和下一個月
pre 日期 下一個 測試 -s digg rem bind popu /** * 獲取上一個月 * * @date 格式為yyyy-mm-dd的日期,如:2014-01-25 */ functi
JS 如何獲取當前上一個月、下一個月和月份所含天數
RM javascrip AD 設置 inpu arr ear div chan 在數據報表查詢中,經常需要設置查詢的日期區間,如查詢2018-02-01至2018-02-28的整月數據,這時需要提供快捷整月查詢按鈕: 如: 一般日期年月日之間由“-”或者“/”等符合分
JavaScript 一個文字跑馬燈程式碼實現 可以設定文字內容、左右滾動方向、文字大小和顏色、滾動速度
JavaScript 一個文字跑馬燈程式碼實現,可以設定文字內容、左右滾動方向、文字大小及顏色、滾動速度,暫停和繼續播放。這是一個比較簡單,甚至完全可以用css實現,其實就是滿足小朋友興趣愛好寫的這麼一個demo。看似簡單,其實這裡還是有些實現細節需要注意,所以就跟大家分享下。 1、頁面
題目:在一個二維陣列中,每一行都按照從左到右遞增的順序排序,每一列都按照從上到下遞增的順序排序。請完成一個函式,輸入這樣的一個二維陣列和一個整數,判斷陣列中是否含有該整數。(Python實現)
''' 題目: 在一個二維陣列中,每一行都按照從左到右遞增的順序排序,每一列都按照從上到下遞增的順序排序。 請完成一個函式,輸入這樣的一個二維陣列和一個整數,判斷陣列中是否含有該整數。 ''' '''
java實現一個二維陣列,每一行從左到右遞增,每一列從上到下遞增,輸入一個二維陣列和一個整數,判斷陣列中是否有該整數
/** * 給定二維陣列,尋找key值 */public class FindKey { public static boolean findKey(int[][] arr,int key) { if (arr == null) {
JS實現回車鍵切換到下一個輸入框
進入正題之前,首先說明一下這裡的情況。 因為我的input輸入框全部都是使用JS程式碼動態生成的,也就是說我在頁面裡面點選一次按鈕就會生成幾個輸入框。所以我使用了JQuery的$("#id").on("keydown","input",function()特性來實現捕捉總輸
JQuery intro.js 網頁引導外掛 關於在百度瀏覽器上無法使用鍵盤切換下一個步驟的問題解決
網頁中基本都有很多的網頁引導動畫,找了一些jquery的外掛,最終選擇了intro.js,官網在這裡:intro.js官網發現這個外掛整合簡單,配置也很方便,但發現v9.0的版本中,百度瀏覽器
jquery點擊li標簽之後在該li標簽上添加一個class,點擊下一個li時刪除上一個li的class
style 下一個 div mov 元素 使用 font rem pre 思路:點擊當前li元素後是用removeClass()刪除所有兄弟元素(使用siblings()獲取)的class樣式,然後使用addClass()為當前li添加class 具體演示如下: 1、HTM
自寫:js輪播圖 鼠標劃過下方按鈕,繼續下一個
就會 定時器 pac color lis hover 路線 css 輪播圖 自寫:js輪播圖 鼠標劃過下方按鈕,繼續下一個 定時器關閉後再開啟一般都會按照原來的路線繼續走,不會因為你點了3而下個就會是4 $(".focus-rad>ul>li").hover(
每天一個JS 小demo之自定義滾動條。主要知識點:事件應用
prevent 數據 滾動 sca listener 視頻 希望 特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D
手機影音第七天 視頻的播放下一個視頻功能實現,視頻進度、電量變化的實現
播放器頁面電量變化 視頻進度變化 播放上一個、下一個與序列化實體類 等功能實現 先看下效果圖: 在這裏,視頻進度條會根據視頻播放變化,下方的按鈕中,播放下一個,上一個都已實現。代碼已經托管到碼雲上,想下載看的小夥伴可以從下方地址中獲取 https://git.oschina.net/j
php實現點擊文字提交表單並傳遞數據至下一個頁面
asc div echo data -- 提交表單 blog 類型 使用 <?php $id="4";//等會要把這個數據傳到第二個頁面 ?> <?php echo "<li>";
如何獲取sqlserver 序列下一個值(本文在網絡上找的)
art 直接 for esc seq io操作 rom upload 最小值 使用SQL創建序列對象: IF EXISTS(SELECT * FROM sys.sequences WHERE name = N‘TestSeq‘) DRO