美丽的杭州

JQuery自定义漂亮的滚动条

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2015-04-24

人气8456

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


浏览器默认的滚动条真是丑爆了,不如试试JQuery自定义漂亮的滚动条。

$(function(){
    var Bool=false;
    var Scro=$("#scroll");
    var Scrp=$("#p");
    var Scrobd=$("#bd");
    var Scroul=$("#ul");
    var Scrp_Height =Scrp.outerHeight()/2;
    var Num2=Scro.outerHeight()-Scrp.outerHeight();
    var offsetX=0;
    var offsetY=0;
    Scrp.mousedown(function(e){  
        Bool=true;
    });
    $(document).mouseup(function(){
        Bool=false;
    });
    $(document).mousemove(function(e){
        if(Bool){
            var Num1= e.clientY - Scro.position().top;
            var y=Num1 - Scrp_Height;
            if(y<=1){
                Scrll(0);
                Scrp.css("top",1);
            }else if(y>=Num2){
                Scrp.css("top",Num2);
                Scrll(Num2);
            }else{
                Scrll(y);
            }
        }
    });
    function Scrll(y){
        Scrp.css("top",y);
        Scroul.css("margin-top",-(y/(Scro.outerHeight()-Scrp.outerHeight()))*(Scroul.outerHeight()-Scrobd.height()));
    }
    if(document.getElementById("scroll_bd").addEventListener) 
    document.getElementById("scroll_bd").addEventListener('DOMMouseScroll',wheel,true);
    document.getElementById("scroll_bd").onmousewheel=wheel;
    var Distance=Num2*0.1;
    function wheel(e){
        var evt = e || window.event;
        var wheelDelta = evt.wheelDelta || evt.detail;
        if(wheelDelta == -120 || wheelDelta == 3){
            var Distances=Scrp.position().top+Distance;
            if(Distances>=Num2){
                Scrp.css("top",Num2);
                Scrll(Num2);
            }else{
                Scrll(Distances);
            }
            return false;
        }else if (wheelDelta == 120 || wheelDelta == -3){
            var Distances=Scrp.position().top-Distance;
            if(Distances<=1){
                Scrll(0);
                Scrp.css("top",1);
            }else{
                Scrll(Distances);
            }
            return false;
        }   
    }
});


查看演示
下载资源:8
下载资源
错误提交:

格式:rar 大小:246.23KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1340.html 非特殊说明,本文版权归原作者所有,转载请注明出处
JQuery自定义漂亮的滚动条

我当前G币余额:0 已下载次数:8

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

据说认真评论作品的以后都迅速成长为大神了(已有2 评论)