基于jquery的滑动样例代码,学习jquery的朋友可以参考下。
复制代码 代码如下:
<html>
<head>
<title>here</title>
<script src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<div>
<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>
<div>
<div>
<div>
<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>
相关文章
最新评论
站长推荐 正版Windows 10 家庭/专业版,操作系统限时抢购[¥1088→¥248] 站长推荐 Microsoft Office 2016/2019/365 正版最低价仅需[ ¥148元]
大家感兴趣的内容
最近更新的内容
常用在线小工具