基于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>



相关阅读:
jQuery 解析xml文件
php empty,isset,is_null判断比较(差异与异同)
CSS教程:position属性
CreateWeb.vbs 代码
php 设计模式之 工厂模式
手动添加用户步骤
CSS实例:超酷的网站导航按钮
javascript 读取图片文件的大小
iframe创建智能表单
JavaScript 定义function的三种方式小结
ASP Eval、Execute、ExecuteGlobal区别分析
CentOS 4.4及Linux下最常用最有效的安全设置
linq to sql 中,如何解决多条件查询问题,答案,用表达式树! (下)
dedecms 5.6 分页样式代码修改方法
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4