基于jquery的滑動(dòng)樣例代碼
更新時(shí)間:2010年11月20日 20:34:00 作者:
基于jquery的滑動(dòng)樣例代碼,學(xué)習(xí)jquery的朋友可以參考下。
復(fù)制代碼 代碼如下:
<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 之 $().hover(func1, funct2)使用方法
.hover(func1, func2) 的效果等效于: mouseenter(), mouseleave()2012-06-06jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04jQuery層動(dòng)畫定位滑動(dòng)效果的方法
這篇文章主要介紹了jQuery層動(dòng)畫定位滑動(dòng)效果的方法,涉及jQuery中animate方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04jquery實(shí)現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實(shí)例代碼
本實(shí)例使用jquery操作div的CSS實(shí)現(xiàn)了可隱藏重現(xiàn)的靠邊懸浮層,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05jquery實(shí)現(xiàn)最簡單的滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)最簡單的滑動(dòng)菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁面元素動(dòng)態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jquery 圓角遮罩圖片實(shí)現(xiàn)圖片圓角
用jquery實(shí)現(xiàn)的圖片圓角效果代碼。2009-05-05