jQuery实现右下角可缩放大小的层完整实例
更新时间:2016年06月20日 14:45:17 作者:cherry
这篇文章主要介绍了jQuery实现右下角可缩放大小的层,以完整实例形式分析了jQuery页面元素及相关样式属性操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考,具体如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>大小可缩放层测试</title> <script type = "text/javascript" src="jquery-1.7.2.js"></script> <style type = "text/css"> #fa{ border:1px solid blue; overflow:auto; width:400px; height:400px; } #main{ margin:0; padding:0; width:300px; height:280px; border:1px solid red; } </style> <script type = "text/javascript"> $(function(){ var div = getObj("main"); div.onmousemove = function(e){ var e = e || window.event; var posx = e.clientX; var posy = e.clientY; var l = div.offsetLeft; var t = div.offsetTop; var h = div.clientHeight; var w = div.clientWidth; var ol = l+w-10; var or = l+w+10; var ot = t+h-10; var ob = t+h+10; this.style.cursor = ""; if(posx>ol && posx<or && posy >ot && posy<ob){ div.style.cursor = "nw-resize"; } } div.onmousedown = function(e){ var e = e || window.event; var initX = e.clientX; var initY = e.clientY; var l = div.offsetLeft; var t = div.offsetTop; var h = div.clientHeight; var w = div.clientWidth; var ol = l+w-10; var or = l+w+10; var ot = t+h-10; var ob = t+h+10; if(initX>ol && initX<or && initY >ot && initY<ob){ document.onmousemove = function(evt){ var e = evt || window.event; var currX = e.clientX; var currY = e.clientY; div.style.width = w + (currX - initX)+"px"; div.style.height = h+(currY-initY)+"px"; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } } } }); function getObj(id){ return document.getElementById(id); } </script> </head> <body> <div id = "fa"> <div id = "main"></div> </div> </body> </html>
函数封装后:
function resize(div){ div.mousemove(function(e){ var e = e || window.event; var posx = e.clientX; var posy = e.clientY; var l = div.offset().left; var t = div.offset().top; var h = div.height(); var w = div.width(); var ol = l+w-10; var or = l+w+10; var ot = t+h-10; var ob = t+h+10; $(this).css("cursor",""); if(posx>ol && posx<or && posy >ot && posy<ob){ $(this).css("cursor","nw-resize"); } }); div.mousedown(function(e){ var e = e || window.event; var posx = e.clientX; var posy = e.clientY; var l = div.offset().left; var t = div.offset().top; var h = div.height(); var w = div.width(); var ol = l+w-10; var or = l+w+10; var ot = t+h-10; var ob = t+h+10; if(posx>=ol && posx<=or && posy >=ot && posy<=ob){ document.onmousemove = function(e){ var e = e || window.event; var currX = e.clientX; var currY = e.clientY; div.width(w + (currX - posx)); div.height(h+(currY-posy)); } $(document).mouseup(function(){ document.onmousemove = null; }); } }); }
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-02-02jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
这篇文章主要介绍了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法,涉及jquery链式操作及页面元素样式控制的相关技巧,需要的朋友可以参考下2015-07-07jquery.autocomplete修改实现键盘上下键自动填充示例
根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能,下面的代码是自己手写的,喜欢的朋友可以尝试操作下2013-11-11
最新评论