基于jquery的滑动样例代码


Posted in Javascript onNovember 20, 2010
<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>
Javascript 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 #Javascript
简单实用的js调试logger组件实现代码
Nov 20 #Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 #Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 #Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 #Javascript
javascript来定义类的规范小结
Nov 19 #Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 #Javascript
You might like
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php UBB 解析实现代码
2011/11/27 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python 随机森林算法及其优化详解
2019/07/11 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
什么是Python包的循环导入
2020/09/08 Python
python中xlrd模块的使用详解
2021/02/01 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
社区护士演讲稿
2014/08/27 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
租赁协议书
2015/01/27 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
python实现监听键盘
2021/04/26 Python
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android