基于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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
详解python上传文件和字符到PHP服务器
2017/11/24 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python之列表推导式的用法
2019/11/29 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python isinstance函数用法详解
2020/02/13 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
JAVA程序员面试题
2012/10/03 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
师范毕业生求职自荐信
2013/09/25 职场文书
体育口号大全
2014/06/18 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL