基于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 相关文章推荐
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
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
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
Vue.js中的高级面试题及答案
2020/01/13 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
利用python实现周期财务统计可视化
2019/08/25 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
车间安全生产标语
2014/06/06 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
组织生活会发言材料
2014/12/15 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL