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控制都是通过插件来实现，这样增加了插件的灵活性。

    那最终的代码如下：

  • 相关阅读:
    C#中使用事务
    C#中执行数据库存储过程
    构建ASP.net的AJAX开发环境
    C#开发数据库技巧汇总
    索引的作用及其使用
    C#中的多态性
    C#中调用C++的DLL
    不借助其它变量交换两变量值
    ASP.NET页面间传值的9种方式
    TERSUS无代码开发(笔记11)TERSUS框架学习框架基本信息修改
  • 原文地址：https://www.cnblogs.com/jikey/p/2276957.html
Copyright © 2011-2022 走看看