zend framework重定向方法小结
387
2024-02-01
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考,具体如下:
该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0;} .box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;} .drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat} </style> <script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery.resizable.js"></script> </head> <body> <div class="box">拖拽我吧!<span class="drag"></span></div> <script> $(function(){ $(".drag").resizable({ minW : 150, minH : 150, maxW : 500, maxH : 500, }); }) </script> </body> </html>
插件 jquery.dragscale.js 代码:
/* *resizable 0.1 *Dependenc jquery-1.7.1.js */ ;(function(a){ a.fn.resizable = function(options){ var defaults = { //默认参数 minW : 150, minH : 150, maxW : 500, maxH : 500, } var opts = a.extend(defaults, options); this.each(function(){ var obj = a(this); obj.mousedown(function(e){ var e = e || event; //区分IE和其他浏览器事件对象 var x = e.pageX - obj.position().left; //获取鼠标距离匹配元素的父元素左侧的距离 var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离 $(document).mousemove(function(e){ var e = e || event; var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度 var _y = e.pageY - y; _x = _x < opts.minW ? opts.minW : _x; //保证匹配元素的最小宽度为150px _x = _x > opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px _y = _y < opts.minH ? opts.minH : _y; _y = _y > opts.maxH ? opts.maxH : _y; obj.parent().css({width:_x,height:_y}); }).mouseup(function(){ $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件 匹配元素宽高变化停止 }); }); }) } })(jQuery);
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
#免责声明#
本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解!