随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

jQuery拖拽改变元素大小

一个非常简单的例子,体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/29.htm

以下是完整代码，保存到HTML文件打开也可以体验效果。

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4 <meta charset="utf-8" /> 
 5 <title>jQuery 版“元素拖拽改变大小”原型-柯乐义 </title> 
 6 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
 7 <script type="text/javascript">
 8 /* 
 9 * jQuery.Resize 
10 * Date: 2014-12-04 
11 * http://keleyi.com/ 
12 */
13 $(function () {
14 //绑定需要拖拽改变大小的元素对象 
15 bindResize(document.getElementById('kel'+'eyi'));
16 });
17 
18 function bindResize(el) {
19 //初始化参数 
20 var els = el.style,
21 //鼠标的 X 和 Y 轴坐标 
22 x = y = 0;
23 //邪恶的食指 
24 $(el).mousedown(function (e) {
25 //按下元素后，计算当前鼠标与对象计算后的坐标 
26 x = e.clientX - el.offsetWidth,
27 y = e.clientY - el.offsetHeight;
28 //在支持 setCapture 做些东东 
29 el.setCapture ? (
30 //捕捉焦点 
31 el.setCapture(),
32 //设置事件 
33 el.onmousemove = function (ev) {
34 mouseMove(ev || event)
35 },
36 el.onmouseup = mouseUp
37 ) : (
38 //绑定事件 
39 $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
40 )
41 //防止默认事件发生 
42 e.preventDefault()
43 });
44 //移动事件 
45 function mouseMove(e) {
46 //宇宙超级无敌运算中... 
47 els.width = e.clientX - x + 'px',
48 els.height = e.clientY - y + 'px'
49 }
50 //停止事件 
51 function mouseUp() {
52 //在支持 releaseCapture 做些东东 
53 el.releaseCapture ? (
54 //释放焦点 
55 el.releaseCapture(),
56 //移除事件 
57 el.onmousemove = el.onmouseup = null
58 ) : (
59 //卸载事件 
60 $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
61 )
62 }
63 } 
64 </script> 
65 <style type="text/css"> 
66 #keleyi{ 
67 position:absolute; 
68 top:0;left:0; 
69 width:200px; 
70 height:100px; 
71 background:#f1f1f1; 
72 text-align:center; 
73 line-height:16px; 
74 border:1px solid #CCC; 
75 cursor:move; 
76 } 
77 </style> 
78 </head> 
79 
80 <body> 
81 <div id="keleyi">柯乐义：请按住本灰色区域并拖拽.<a href="http://keleyi.com/a/bjad/yy8jnwqj.htm" target="_blank">原文</a>.本效果支持各种浏览器，入Chrome,FireFox,IE,Opera等</div> 
82 </body> 
83 </html>