论坛首页 → Web前端技术论坛 →

jquery写的缩放边栏

浏览 2460 次
锁定老帖子 主题：jquery写的缩放边栏
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • lynnlysh
  • 等级: 一星会员
  • 性别:
  • 文章: 10
  • 积分: 120
  • 来自: 天津
   发表时间：2013-09-11  
写在前面：
这个缩放栏长得很丑，支持你自己用CSS进行美化

调用方法：
<pre name="code" class="html">
<link rel="stylesheet" type="text/css" href="zoombar.css" rel="stylesheet">
<body>
<div style="margin:200px;width:200px;height:200px;" id="text"><h1>正在开发,尽请期待</h1></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="zoombar.js"></script>
<script type="text/javascript">
$(function(){
$('body').Zoombar({container:$("#text"),
    zoomInFunction:function(){
        //点击放大的自定义事件
    },
    zoomOutFunction:function(){
    //点击缩小的自定义事件
    },
    zoomFunction:function(evt,scale){
    //在杆上拖拽的自定义事件 evt事件，scale代表放大或者缩小倍数的参数
    }});
})
</script>
</pre>
重点说：
zoomFunction中scale参数的处理方法如下所示：
<pre name="code" class="js">
if(scale/5-4>0){
    if(scale/5-4>1){
        zoomFunc(Math.pow(0.8,parseInt(scale/5-4)));//0.8一个单位的缩小量，parseInt(scale/5-4)缩小倍数
    }else{
        zoomFunc(1);  
    }
}else{
    if(4-scale/5>1){
        zoomFunc(Math.pow(1.2,parseInt(4-scale/5)));//1.2一个单位的放大量，parseInt(4-scale/5)放大倍数
    }else{
        zoomFunc(1);
    }
}
</pre>
如何做到元素在杆上的拖拽？
在父元素(中间的杆)的mousemove事件中判断鼠标左键是否是按下状态，然后写按下状态的拖拽事件
<pre name="code" class="js">
$("#gun").mousemove(
function(evt){
                if(isPress){
                  $("#mblock").offset({top:evt.clientY}).addClass("zoombar-mousedown");
                  $("#gun").addClass("zoombar-mousedown");
                  zoomThePlace(evt)
                }
            });
</pre>
捕获鼠标左键按下的代码，由于div堆叠的情况，和浏览器各种兼容的情况，最终以以下方式获取鼠标左键按下的判断：
<pre name="code" class="js">
var isPress = false;//处理IE9和火狐对鼠标按下状态监听的矫情的兼容
            $("body,#mblock,#gun,.zoombar-infor,.zoombar").mouseup(function(evt){
                isPress = false;
            }).mousedown(function(evt){
                isPress = true;
            });
</pre>
注意事项：
缩放边栏要适应浏览器窗口大小改变的情况
<pre name="code" class="js">
var me = this;
$container.resize(function(){
                me.location($container);
            });
</pre>
缺点总结：
chrome下拖拽时鼠标不显示手型
通过鼠标按键的抬起事件对isPress的捕获判断不是很准确
鼠标在拖拽滑块时容易造成选中一大片变蓝色的情况，如下图中所示：

最后：
希望大伙儿 给我美化下，并且解决以上提到的bug们
源码：
zoombar.js

<pre name="code" class="js">
$.Zoombar = $.Zoombar||{};
    $.extend($.Zoombar,{
        init:function($container){
            var me = this;
            $container.resize(function(){
                me.location($container);
            });
            return $("<div class='zoombar' id='zoombar'/>").appendTo("body");
              
        },
        initFunction:function(options){
            this.zoomInFunction = options.zoomInFunction;
            this.zoomOutFunction = options.zoomOutFunction;
            this.zoomFunction = options.zoomFunction;
        },
        location:function($container){
            var xc = $("#mblock").position().top-$("#zoombar").position().top==0?43:$("#mblock").position().top-$("#zoombar").position().top;
            $("#zoombar").offset({top: $container.position().top+50,left: $container.position().left+10});
            $("#mblock").offset({top: $("#zoombar").position().top+xc,left: $("#zoombar").position().left});
            $(".zoombar-infor").offset({top: $container.position().top+45,left: $container.position().left+25});
           
        },
        addContent:function($container){
            var me = this;
            $("<div class='zoombar-inButton'>+</div>").appendTo("#zoombar").click(function(){
                if($("#mblock").offset().top>$("#gun").offset().top){
                    me.zoomInFunction();
                    $("#mblock").offset({top:$("#mblock").offset().top-5});
                }
            });
            $("<div class='zoombar-gun' id='gun'></div>").appendTo("#zoombar");
            $("<div class='zoombar-outButton'>-</div>").appendTo("#zoombar").click(function(){
                 if($("#mblock").offset().top<($("#gun").offset().top+$("#gun").height())){
                    me.zoomOutFunction();
                    $("#mblock").offset({top:$("#mblock").offset().top+5});
                 }
            });
            $("<div id='mblock' class='zoombar-mblock'></div>").appendTo("body");
            var isPress = false;//处理IE9和火狐对鼠标按下状态监听的矫情的兼容
            $("body,#mblock,#gun,.zoombar-infor,.zoombar").mouseup(function(evt){
                isPress = false;
            }).mousedown(function(evt){
                isPress = true;
            });
            $("#gun").mousedown(function(evt){
            $("#mblock").offset({top:evt.clientY});
                $("#gun").addClass("zoombar-mousedown");
            zoomThePlace(evt);
            }).mousemove(function(evt){
                if(isPress){
                  $("#mblock").offset({top:evt.clientY}).addClass("zoombar-mousedown");
                  $("#gun").addClass("zoombar-mousedown");
                  zoomThePlace(evt)
                }
            }).mouseup(function(evt){
                isPress = false;
            });
            $("<div class='zoombar-infor'>-200%<br><br>-100%<br><br>-1%</div>").appendTo("body");
            function zoomThePlace(evt){
                $("#cellEditToolbar").remove();
                if($("#mblock").offset().top<($("#gun").offset().top+$("#gun").height())&&$("#mblock").offset().top>$("#gun").offset().top){
                    var scale = $("#mblock").offset().top-$("#gun").offset().top;
                    me.zoomFunction(evt,scale);
                }
            }
        }
       
    });
    $.extend($.fn,{
       Zoombar : function(options){
            $.Zoombar.initFunction(options);
            this.$elt = $.Zoombar.init(options.container);
            $.Zoombar.addContent(options.container);
            $.Zoombar.location(options.container)
            return this;
       }
    });
</pre>
zoombar.css
<pre name="code" class="css">
.zoombar {
width:9px;
position:absolute!important;
}
.zoombar-inButton {
background-color:rgb(223, 223, 223);
cursor:pointer;
text-align:center;
}
.zoombar-outButton {
background-color:rgb(223, 223, 223);
cursor:pointer;
text-align:center;
}
.zoombar-gun {
background-color:rgb(223, 223, 223);
height:50px;
width:5px;
margin-left:2px;
margin-right:2px;
cursor:pointer;
}
.zoombar-mousedown {
cursor:pointer;
}
.zoombar-mblock {
position:absolute!important;
width:10px;
height:5px;
background-color:gray;
cursor:pointer;
}
.zoombar-infor {
position:absolute!important;
width:50px;
padding-left:3px;
font-size:10px;
line-height: 20px;
}
</pre>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@好久不见的分割线@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
得不到的永远在躁动，被偏爱的却有恃无恐
  • 大小: 2.6 KB
  • 大小: 2.9 KB
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics