文档章节

分享一个JQuery写的点击上下滚动的小例子

rin9958
 rin9958
发布于 2016/07/07 22:01
字数 784
阅读 225
收藏 3

效果图

enter image description here

演示地址 源码下载

代码如下:

<!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

© 著作权归作者所有

共有 人打赏支持
rin9958
粉丝 9
博文 113
码字总数 54109
作品 0
程序员
私信 提问
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
41
0
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
605
6
2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina
2014/01/11
12.9K
24
2012年度最新的7款导航菜单Jquery特效

网站悬浮快速导航Jquery特效 此Jquery特效是一款非常实用的功能,最近很多网友想要JquerySchool网站悬浮快速导航的特效,为了满足网友们,今天把它整理出来分享给网友们用,此功能原来来自网...

邓剑彬
2012/11/29
605
10
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
808
5

没有更多内容

加载失败,请刷新页面

加载更多

深入理解Java PriorityQueue

ava中PriorityQueue通过二叉小顶堆实现,可以用一棵完全二叉树表示。本文从Queue接口函数出发,结合生动的图解,深入浅出地分析PriorityQueue每个操作的具体过程和时间复杂度,将让读者建立对...

java菜分享
30分钟前
4
0
玩手机与做实验

看过这样一个故事:说的是在二十世纪二十年代初的一个深夜,担任英国剑桥大学卡文迪许实验室主任的卢瑟福来实验室检查,发现一位学生还在做实验。卢瑟福就问他:“你上午做什么了?”学生回答...

Bob2100
41分钟前
4
0
Kafka流式处理

Kafka Streams 初识流式处理 什么是数据流 数据流(也叫事件流)是无边界数据集的抽象表示。无边界意味着无限和持续增长。无边界数据集之所以是无限的,是因为随着时间的推移,新记录会不断加...

东都大狼狗
50分钟前
5
0
Mysql主从复制(拓展博客文章扩充知识面)

#不停库不锁表在线主从配置 使用 Xtrabackup 在线对MySQL做主从复制 1.数据量大的话还是建议使用工具例如xtrabackup,mysqldump比较适合操作10G以下的数据备份复制。 2.做业务之前考虑清楚具...

robertt15
55分钟前
3
0
docker快速搭建几个常用的第三方服务

本次和大家分享的内容是使用docker快速搭建工作中常用的第三方的服务,对于有一些互联网背景的公司来说,以下几个服务都是很需要的:redis,rabbit,elasticsearch; 如果想学习Java工程化、...

编程SHA
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部