zoukankan      html  css  js  c++  java

  • Jq滚动条插件写法(二)

    接着上次的未完的部分。

    接下是对滚轮的支持。

    滚轮大概可以分为这么两类：

    1. Firefox

    Firefox 需要添加 'DOMMouseScroll' 事件支持，并取值是 使用detail 为正负30。

    2. IE,Opera,Safari,Chrome

    而这四类，则直接在 window.onmousewheel = document.onmousewheel = $(dom).onmousewheel = fn

    取值是： 正负120，

    虽然这两个取值是不一样的，但含义是一样的，正为向上，负为向下。

    所以：

    mousewheel: function(fun){
        return this.each(function(){
            var that = this;
                that.delta = 0; //滚动方向
            
            if($.browser.msie || $.browser.safari){ //IE Safari 
                that.onmousewheel = function(){
                    that.delta = event.wheelDelta; // IE,Opera,Safari,Chrome 使用wheelDelta 只取 +-120
                    event.returnValue = false;
                    fun && fun.call(that); //    
                }
            } else { //Firefox
                that.addEventListener('DOMMouseScroll', function(e){
                    that.delta = e.detail > 0 ? -1 : 1; // Firefox 使用 detail 只取 +-3
                    e.preventDefault();
                    fun && fun.call(that);
                }, false);
            }
        });
        
    }

    然后根据，上面总结的特性，添加代码：

    $(that).mousewheel(function(){
        if(this.delta > 0){ //如果大于零，则向上，反之向下。
            currentTop -= 15;
        } else {
            currentTop += 15;
        }
        setScrollTop();
    });

    然后，添加对上下按钮的支持：

    View Code
    //向上按钮绑定事件
    jKBarTop.bind('mousedown', function(e){
        that.setBarTop('up');
        
        $(document).mouseup(function(){
            $(document).unbind();
            clearTimeout(scrollTopTimer);
            scrollTopSpeed = 0;
        });
    });

    //向下按钮绑定事件
    jKBarBot.bind('mousedown', function(e){
        that.setBarTop('bot');
        
        $(document).mouseup(function(){
            $(document).unbind();
            clearTimeout(scrollTopTimer);
            scrollTopSpeed = 0;
        });
    });

    //按钮设置高度方法
    that.setBarTop = function(scrollDir){
        if(scrollDir == 'up'){
            currentTop -= 15;
        } else {
            currentTop += 15;
        }
        setScrollTop();
        
        scrollTopSpeed += 2;
        var t = 500 - scrollTopSpeed * 50;
        t <=0 && (t = 0);
        
        scrollTopTimer = setTimeout(function(){
            that.setBarTop(scrollDir);
        }, t);
    }

    基本代码块就这么多，然后是添加风格修改，

    由于css属性选择器覆盖的特性，父类可以覆盖子类的权重。所以提供其它两种风格：

    /* 简单 */
    .jkscroll-wrap .jkscroll-simple    {width:12px;background:#f2f2f2;border-left:1px solid #dadada;}
    .jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot    {display:none;}
    .jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid    {top:0;right:-2px;background:#c0c0c0;border:none 0;}
    .jkscroll-wrap .jkscroll-simple .hover    {background:#909090;}
    /* blue */
    .jkscroll-wrap .jkscroll-gray    {background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;}
    .jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot    {background:url(http://app.soche8.com/show/jscoll/s_bg.gif);}
    .jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid    {background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0;border:1px solid #BCBCBC;}

    由此，在调用时直接可以对样式进行操作，添加 .jkscroll-simple, .jkscroll-gray 两个样式，即可更换风格。

    var defaults = {
        pattern: 'blue', //默认风格
    };
    var opts = $.extend(defaults, options);

    //风格设定
    if(opts.pattern == 'jkscroll-simple'){
        jkBar.addClass('jkscroll-simple');
        jkBarBtnWidth = 0;
    } else if(opts.pattern == 'jkscroll-gray'){
        jkBar.addClass('jkscroll-gray');
    }

    在调用时，提供三种风格的支持：

    $('.jkscroll-wrap').jikeyScrollerBar({
        pattern: 'jkscroll-simple' //简版
        //pattern: 'jkscroll-gray' //灰色
        //pattern: 'jkscroll-blue' //蓝色
    });

    由于想更自动化一点，外部的包装层也使用jquery提供的方向进行动态的添加：

    var jkScrollWrap = this.wrapInner('<div class="jkscroll-cont"></div>'),
        jkScrollCont = jkScrollWrap.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>');

    这样的话，只要对内容高度进行限定，外边的滚动条，从DOM结构到js控制都是通过插件来实现，这样增加了插件的灵活性。

    那最终的代码如下：

  • 相关阅读:
    笔记35 跨重定向请求传递数
    判断邮箱的正则表达式
    按钮
    async await 的用法
    笔记34 Spring MVC的高级技术——处理multipart形式的数据
    Convert Sorted Array to Binary Search Tree
    Binary Tree Zigzag Level Order Traversal
    Unique Binary Search Trees,Unique Binary Search Trees II
    Validate Binary Search Tree
    Populating Next Right Pointers in Each Node,Populating Next Right Pointers in Each Node II
  • 原文地址：https://www.cnblogs.com/jikey/p/2276957.html
Copyright © 2011-2022 走看看