分享一个JQuery写的点击上下滚动的小例子
2016-03-31 20:25
891 查看
效果图
演示地址 源码下载
代码如下:
转载自:http://www.9958.pw/post/jquery_up_and_down
演示地址 源码下载
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='./js/jquery-1.7.2.js' type='text/javascript'%3E%3C/script%3E")); } </script> <style type="text/css"> /*全局控制*/ body{margin:0;padding:0;font-size:12px;font-family:"微软雅黑";-webkit-text-size-adjust:none;min-width: 1200px;} html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p{margin:0;padding:0;} input,select,textarea{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;} a{color:#333;text-decoration:none;} a:hover{text-decoration:underline;} /*显示样式*/ .tab_type li {background-color: #DDDEDC;width: 86px;line-height: 34px;text-align: center;margin-bottom: 1px;} .tab_type li a{ display: block; font-weight: bold;} .tab_type li a:hover{text-decoration: none;background-color:#D3B92A;} .tab_type li span{margin:0 2px;} .t_f{position: relative;top: -9px;font-size: 14px;} .t_n{font-size: 18px;} /*重要样式*/ #scrollDiv{width: 86px;height: 185px;min-height: 25px;overflow: hidden;} </style> <script type="text/javascript"> /*重要脚本*/ (function ($) { $.fn.extend({ Scroll: function (opt, callback) { if (!opt) var opt = {}; var _btnUp = $("#" + opt.up); //Shawphy:向上按钮 var _btnDown = $("#" + opt.down); //Shawphy:向下按钮 var _this = this.eq(0).find("ul:first"); var lineH = _this.find("li:first").height()+1; //获取行高 此处我加了1 因为样式中用到了margin-bottom:1px 这个根据自己情况修改 var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10); //每次滚动的行数,默认为一屏,即父容器高度 var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷动速度,数值越大,速度越慢(毫秒) var m = 0; //用于计算的变量 var count = _this.find("li").length; //总共的<li>元素的个数 var upHeight = line * lineH; var showline = opt.showline;//显示多少行 function scrollUp() { if (!_this.is(":animated")) { //判断元素是否正处于动画,如果不处于动画状态,则追加动画。 if (m < count) { //判断 m 是否小于总的个数 var go_count = count-m-showline; if((count-m)>showline){ if(go_count<line){ m += go_count; upHeight = go_count * lineH; _this.animate({ marginTop: "-=" + upHeight + "px" }, speed); }else{ m += line; upHeight = line * lineH; _this.animate({ marginTop: "-=" + upHeight + "px" }, speed); } }else{ } } } } function scrollDown() { if (!_this.is(":animated")) { if(m>0){ if (m > line) { //判断m 是否大于一屏个数 m -= line; upHeight = line * lineH; _this.animate({ marginTop: "+=" + upHeight + "px" }, speed); }else{ upHeight = m * lineH; m -= m; _this.animate({ marginTop: "+=" + upHeight + "px" }, speed); } } } } _btnUp.bind("click", scrollUp); _btnDown.bind("click", scrollDown); } }); })(jQuery); $(function () { $("#scrollDiv").Scroll({ line: 2, speed: 500,up: "btn1", down: "btn2",showline:5 }); }); </script> </head> <body> <div class="tab_type"> <!--核心代码 开始--> <div id="scrollDiv"> <ul> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">36</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">38</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">40</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">52</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">60</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">70</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">80</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">92</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">120</span><span class="">mm</span></a></li> <li><a href="javascript:"><span class="t_f">□</span><span class="t_n">130</span><span class="">mm</span></a></li> </ul> </div> <input type="button" id="btn1" value="上滚" /> <input type="button" id="btn2" value="下滚" /> <!--核心代码 结束--> </div> </body> </html>
转载自:http://www.9958.pw/post/jquery_up_and_down
相关文章推荐
- 高效使用jQuery之选择器
- javascript中jQuery对象和dom对象
- 用jQuery—ui对表格进行修改数据
- 用Jquery做图片轮播
- JQuery选择器收藏
- jQuery.trigger() 函数详解
- jquery判断元素是否有某个属性
- jQuery的ajax()方法提交数组问题
- 从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)
- jquery中html()、text()、val()的区别
- jquery.validate form 基本使用
- 关于Jquery的笔记
- Jquery Plugin 初学
- jquery select取值,赋值操作
- 基于jquery实现轮播焦点图插件
- jQuery源码学习:使用隐藏的new来创建对象
- jquery的mouseover和mouseout闪烁问题
- jquery.cookie.js 中cookie删除问题
- PHP+jQuery+Ajax多图片上传
- jquery元素获取