写在前面:
这个缩放栏长得很丑,支持你自己用CSS进行美化
调用方法:
<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的捕获判断不是很准确
鼠标在拖拽滑块时容易造成选中一大片变蓝色的情况,如下图中所示:
最后:
希望大伙儿 给我美化下,并且解决以上提到的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;
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@好久不见的分割线@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
得不到的永远在躁动,被偏爱的却有恃无恐
- 大小: 2.6 KB
- 大小: 2.9 KB
分享到:
相关推荐
html+css+jquery实现侧边栏的滑入滑出 分为两种模式 第一种是hover实现, 第二种是jquery实现
jQuery滑动侧边栏实现多级菜单插件jSide.zip
这是一款非常实用的jQuery固定侧边栏导航菜单插件。该插件分三种固定侧边栏效果:正常、小型和大型侧边栏。该固定侧边栏插件在用户向下滚动页面到一定距离时,侧边栏就会固定随页面往下滚动,非常实用。
jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码
jquery网页侧边栏在线客服代码是一款好看的固定层网页侧边栏在线qq客服代码。
在开发Jquery Mobile的时候,我们往往需要侧边栏来导航我们所需的页面。自己整合了一些资源来实现我的目的
网站侧边栏可展开折叠jQuery导航
jquery-vertical-navigation是一款简单实用的jQuery左侧固定侧边栏插件。它可以制作多级子菜单,使用Font Awesome作为默认图标,通过简单的设置就可以生成一个漂亮的固定侧边栏菜单。
jSide是一款jquery滑动侧边栏插件。该jquery滑动侧边栏支持多级菜单,采用响应式设计,支持CSS3动画,内置多种皮肤,兼容所有的主流浏览器,非常实用。
jQuery倾斜打开侧边栏菜单代码是一款jQuery HTML5实现的点击左侧按钮倾斜打开菜单特效。
ssMenu是一款jQuery固定侧边栏插件。ssMenu侧边栏插件使用简单,内置多种颜色主题,也可以自定义侧边栏菜单的颜色,非常实用。
hc-mobile-nav是一款适合移动手机的jQuery多级侧边栏菜单插件。它可以创建移动优先的、多级的隐藏滑动侧边栏菜单,支持折叠菜单、向下展开菜单和完全展开菜单等多种展示方式。
jQuery手机侧边栏展开收缩菜单代码.zip
jQuery实现侧边栏导航下拉菜单布局代码.zip
一款在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中的jQuery网页左右侧边栏固定中间滚动代码。