基于jquery的滑動樣例代碼
更新時間：2010年11月20日 20:34:00 作者：
基于jquery的滑動樣例代碼，學習jquery的朋友可以參考下。
復制代碼 代碼如下:
<html>
<head>
<title>here</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body style="text-align: center;">
<div style="width:540px; margin: 0 auto;">
<div id="button1" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">1</div>
<div id="button2" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">2</div>
<div id="button3" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">3</div>
<div id="button4" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">4</div>
<div id="button5" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">5</div>
<div id="button6" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">6</div>
<div id="button7" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">7</div>
<div id="button8" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">8</div>
<div id="button9" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">9</div>
<div id="button10" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">10</div>
</div>
<div style="clear: both"></div>
<div style="width: 540px; margin: 0 auto; height: 400px; position: relative; z-index: 999; overflow: hidden;">
<div style="position:relative;padding:0px;margin:0 auto;width:100px;">
<div id="list" style="width:1000px;height:400px;position:absolute; z-index:9;left:-220px;">
<div style="width:96px;height:400px;background-color:#004;margin:2px;float:left;color:#FFF;">1</div>
<div style="width:96px;height:400px;background-color:#008;margin:2px;float:left;color:#FFF;">2</div>
<div style="width:96px;height:400px;background-color:#00F;margin:2px;float:left;color:#FFF;">3</div>
<div style="width:96px;height:400px;background-color:#044;margin:2px;float:left;color:#FFF;">4</div>
<div style="width:96px;height:400px;background-color:#048;margin:2px;float:left;color:#FFF;">5</div>
<div style="width:96px;height:400px;background-color:#04F;margin:2px;float:left;color:#FFF;">6</div>
<div style="width:96px;height:400px;background-color:#444;margin:2px;float:left;color:#FFF;">7</div>
<div style="width:96px;height:400px;background-color:#448;margin:2px;float:left;color:#FFF;">8</div>
<div style="width:96px;height:400px;background-color:#44F;margin:2px;float:left;color:#FFF;">9</div>
<div style="width:96px;height:400px;background-color:#484;margin:2px;float:left;color:#FFF;">10</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var speed = 1000;
var div_width = $("#list > div:first").width() + parseInt($("#list > div:first").css("margin-left")) + parseInt($("#list > div:first").css("margin-right"));
var offset = 220;
$(".button").click(function(){
id = $(this).attr("id").replace("button","");
var _length = -(id - 1) * div_width - offset;
$("#list").animate({left:_length + "px"},speed);
});
});
</script>
</html>
相關(guān)文章
jquery.jstree 增加節(jié)點的雙擊事件代碼
本文基于 jsTree 1.0-rc1 版本增加節(jié)點的雙擊事件。2010-07-07
jquery ajaxfileuplod 上傳文件 essyui laoding 效果【防止重復上傳文件】
點擊一次上傳, 當上傳操作結(jié)束后才能操作界面，實現(xiàn)方式是通過 ajaxfileuplod 上傳文件，需要的朋友參考下吧2018-05-05
這篇文章主要為大家詳細介紹了jquery實現(xiàn)淡入淡出輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
最近再做價值中國微博，從用戶體驗的角度，將很多常用的window.alert或者window.confirm之類比較生硬死板冷不丁的提示改為彈出層的方式實現(xiàn)。2010-10-10
在系統(tǒng)開發(fā)過程中經(jīng)常會用到系統(tǒng)的當前時間，然而我們遇到的問題確又是各個瀏覽器返回值不同，就像典型的IE和FF瀏覽器。2008-12-12
jQuery中的$是什么意思及 $. 和 $().的區(qū)別
這篇文章主要介紹了jQuery中的$是什么意思及 $. 和 $().的區(qū)別,需要的朋友可以參考下2018-04-04
雖然前面已經(jīng)寫過兩篇關(guān)于DivAlert的隨筆了，也已經(jīng)實現(xiàn)了我的需求，但是今天發(fā)現(xiàn)很多jQuery插件代碼中都使用了extend方法，這樣確實讓默認設(shè)置的代碼減少了許多。2010-04-04
這篇文章主要介紹了jQuery+HTML5實現(xiàn)圖片上傳前預覽效果,涉及jquery操作圖片動態(tài)顯示效果,非常簡單實用,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery實現(xiàn)圖片水平滾動效果，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jquery validate添加自定義驗證規(guī)則(驗證郵箱 郵政編碼)
這篇文章主要介紹了query validate添加自定義驗證規(guī)則,可以驗證郵箱、郵政編碼等，看代碼參考使用2013-12-12