复制代码 代码如下:
<html>
<head>
<title>here</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<div>
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
<div id="button4">4</div>
<div id="button5">5</div>
<div id="button6">6</div>
<div id="button7">7</div>
<div id="button8">8</div>
<div id="button9">9</div>
<div id="button10">10</div>
</div>
<div></div>
<div>
<div>
<div id="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>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>
【基于jquery的滑动样例代码】相关文章：
★ 使用RequireJS优化JavaScript引用代码的方法
★ JavaScript基于setTimeout实现计数的方法
★ jQuery的Scrollify插件实现滑动到页面下一节点