基于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 三种编解码方式
Feb 01 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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文件下载类
2006/12/06 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php实现图片添加水印功能
2014/02/13 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
幼儿园家长评语
2014/02/10 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
环保建议书
2014/03/12 职场文书
移风易俗倡议书
2014/04/15 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
技能培训通讯稿
2015/07/18 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL