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

来源：互联网发布：网络电视在线观看编辑：程序博客网时间：2024/06/03 16:41
效果图
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
0 0