jquery写的缩放边栏

程序员文章站 2022-07-10 22:32:54

...

写在前面：
这个缩放栏长得很丑，支持你自己用CSS进行美化
jquery写的缩放边栏

博客分类： JQuery jqueryUIXHTML

调用方法：

<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>

重点说：
zoomFunction中scale参数的处理方法如下所示：

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);
    }
}

如何做到元素在杆上的拖拽？
在父元素(中间的杆)的mousemove事件中判断鼠标左键是否是按下状态，然后写按下状态的拖拽事件

$("#gun").mousemove(
function(evt){
                if(isPress){
                  $("#mblock").offset({top:evt.clientY}).addClass("zoombar-mousedown"); 
                  $("#gun").addClass("zoombar-mousedown");
                  zoomThePlace(evt)
                }
            });

捕获鼠标左键按下的代码，由于div堆叠的情况，和浏览器各种兼容的情况，最终以以下方式获取鼠标左键按下的判断：

 var isPress = false;//处理IE9和火狐对鼠标按下状态监听的矫情的兼容
            $("body,#mblock,#gun,.zoombar-infor,.zoombar").mouseup(function(evt){
                isPress = false;
            }).mousedown(function(evt){
                isPress = true;
            });

注意事项：
缩放边栏要适应浏览器窗口大小改变的情况

var me = this;
$container.resize(function(){
                me.location($container);
            });

缺点总结：
chrome下拖拽时鼠标不显示手型
通过鼠标按键的抬起事件对isPress的捕获判断不是很准确
鼠标在拖拽滑块时容易造成选中一大片变蓝色的情况，如下图中所示：
jquery写的缩放边栏

博客分类： JQuery jqueryUIXHTML

最后：
希望大伙儿给我美化下，并且解决以上提到的bug们
源码：
zoombar.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;
       } 
    });

zoombar.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;
}

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@好久不见的分割线@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
得不到的永远在躁动，被偏爱的却有恃无恐

zoombar.zip (39.1 KB)
下载次数: 32

查看图片附件

jquery写的缩放边栏

jQuery插件实现非常实用的tab栏切换功能【案例】

仿JQuery输写高效JSLite代码的一些技巧

jQuery 写的简单打字游戏可以提示正确和错误的次数

写jQuery插件时的注意点

jQuery实现的移动端图片缩放功能组件示例

基于Jquery和Css3代码制作可以缩放的搜索框

基于JQuery实现的图片自动进行缩放和裁剪处理

HTML5重写video控制栏,Chrome去除下载按钮的代码实例讲解

记录一下自己用jQuery写的轮播图

jQuery快速上手：写jQuery与直接写JS的区别详细解析