微客导航 » 文章资讯 » js实现鼠标拖拽缩放div实例代码

js实现鼠标拖拽缩放div实例代码

2023-08-25 12:12:04 372

封装为了jq插件，如下

drag.js

;(function($){
$.fn.dragDiv=function(options){
vardef={
maxW:600,//可伸缩的最大宽度
minW:50//可伸缩的最小宽度
};//参数默认值
varopts=$.extend(def,options);//扩展参数，使用默认值或传参
//设置最大/最小宽度
varmax_width=opts.maxW,
min_width=opts.minW;

//记录鼠标相对left盒子x轴位置
varmouse_x=0;
varleft=$(this).parent('div')[0];

//鼠标移动事件
functionmouseMove(e){
vare=e||window.event;
varleft_width=e.clientX-mouse_x;//可伸缩div的宽度
left_width=left_widthmax_width?max_width:left_width;
left.style.width=left_width+"px";
}
//终止事件
functionmouseUp(){
document.onmousemove=null;
document.onmouseup=null;
}
$(this).mousedown(function(e){
vare=e||window.event;
//阻止默认事件
e.preventDefault();
mouse_x=e.clientX-left.offsetWidth;//可伸缩div距离左侧边界的宽度
document.onmousemove=function(){
mouseMove()
};
document.onmouseup=function(){
mouseUp()
};
})
}
})(jQuery)

html文件







鼠标进行伸缩div

以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

js实现鼠标拖拽缩放div实例代码

热门推荐

随机推荐