1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 100px; height: 100px; background: red; position: absolute;} 8 #img1 { position: absolute;} 9 </style> 10 <script> 11 window.onload = function() { 12 13 var oDiv = document.getElementById('div1'); 14 var oImg = document.getElementById('img1'); 15 16 drag(oImg); 17 18 drag(oDiv); 19 20 function drag(obj) { 21 22 obj.onmousedown = function(ev) { 23 var ev = ev || event; 24 // 获得鼠标按下的时候 鼠标距离元素最左边和最上边的距离 25 var disX = ev.clientX - this.offsetLeft; 26 var disY = ev.clientY - this.offsetTop; 27 //设置非标准IE的全局捕获事件。 修复非标准IE下的 禁止 浏览器默认拖动 选中文字 和 //图片的问题。（将浏览器默认的事件抢过来，不让其执行默认行为） 28 //非标准IE下的全局捕获: 当一个元素设置全局捕获的时候，它会监听所有的事件，并且。将发生在其他元素身上的事件全部抢过来， 29 // 如果自己身上有绑定 相同的事件处理函数，则执行。 30 if ( obj.setCapture ) { 31 obj.setCapture(); 32 } 33 34 document.onmousemove = function(ev) { 35 var ev = ev || event; 36 37 var L = ev.clientX - disX; 38 var T = ev.clientY - disY; 39 //L 小于 100 的时候， L = 0 ，看起来就像磁性吸附的效果 这里也能做范围限制 40 if ( L < 100 ) { 41 L = 0; 42 } else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) { 43 L = document.documentElement.clientWidth - obj.offsetWidth; 44 } 45 46 if ( T < 0 ) { 47 T = 0; 48 } else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) { 49 T = document.documentElement.clientHeight - obj.offsetHeight; 50 } 51 52 obj.style.left = L + 'px'; 53 obj.style.top = T + 'px'; 54 55 } 56 57 document.onmouseup = function() { 58 document.onmousemove = document.onmouseup = null; 59 //取消非标准IE下的全局捕获， 60 if ( obj.releaseCapture ) { 61 obj.releaseCapture(); 62 } 63 } 64 //标准浏览器使用这个就可以禁止浏览器默认的拖动选中文本 和图片的问题 65 return false; 66 67 } 68 69 } 70 71 } 72 </script> 73 </head> 74 75 <body> 76 <div id="div1"></div> 77 <img src="1.jpg" id="img1" /> 78 </body> 79 </html>
增加碰撞检测：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 100px; height: 100px; background: red; position: absolute; z-index: 2;} 8 #img1 { position: absolute; left: 500px; top: 200px;} 9 </style> 10 <script> 11 window.onload = function() { 12 13 var oDiv = document.getElementById('div1'); 14 var oImg = document.getElementById('img1'); 15 16 drag(oDiv); 17 18 function drag(obj) { 19 20 obj.onmousedown = function(ev) { 21 var ev = ev || event; 22 23 var disX = ev.clientX - this.offsetLeft; 24 var disY = ev.clientY - this.offsetTop; 25 26 if ( obj.setCapture ) { 27 obj.setCapture(); 28 } 29 30 document.onmousemove = function(ev) { 31 var ev = ev || event; 32 33 var L = ev.clientX - disX; 34 var T = ev.clientY - disY; 35 36 //碰撞检测--------- 原理就是获取拖拽的元素的 上下左右值 和 等待碰撞的元素的 上下左右值 进行比较。 37 var L1 = L; 38 var R1 = L + obj.offsetWidth; 39 var T1 = T; 40 var B1 = T + obj.offsetHeight; 41 42 var L2 = oImg.offsetLeft; 43 var R2 = L2 + oImg.offsetWidth; 44 var T2 = oImg.offsetTop; 45 var B2 = T2 + oImg.offsetHeight; 46 47 if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) { 48 oImg.src = '1.jpg'; 49 } else { 50 oImg.src = '2.jpg'; 51 } 52 //碰撞检测--------- 53 54 obj.style.left = L + 'px'; 55 obj.style.top = T + 'px'; 56 57 } 58 59 document.onmouseup = function() { 60 document.onmousemove = document.onmouseup = null; 61 if ( obj.releaseCapture ) { 62 obj.releaseCapture(); 63 } 64 } 65 66 return false; 67 68 } 69 70 } 71 72 } 73 </script> 74 </head> 75 76 <body> 77 <div id="div1"></div> 78 <img src="1.jpg" id="img1" /> 79 </body> 80 </html>
拖拽改变层大小：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;} 8 </style> 9 <script> 10 window.onload = function() { 11 12 var oDiv = document.getElementById('div1'); 13 14 oDiv.onmousedown = function(ev) { 15 16 var ev = ev || event; 17 18 var disW = this.offsetWidth; 19 var disX = ev.clientX; 20 var disL = this.offsetLeft; 21 22 var b = ''; 23 24 if ( disX > disL + disW - 10 ) { 25 //alert( 'right' ); 鼠标在元素的右边 26 b = 'right'; 27 } 28 if ( disX < disL + 10 ) { 29 //alert( 'left' ); 鼠标在元素的左边 30 b = 'left'; 31 } 32 33 document.onmousemove = function(ev) { 34 35 var ev = ev || event; 36 37 switch( b ) { 38 39 case 'left': 40 oDiv.style.width = disW - ( ev.clientX - disX ) + 'px'; //修改width 值 .由于ev.clientX（鼠标move时候的值） - disX（鼠标按下时候的值） 结果为 正负两种 ， 而+ 负数 等于 - 一个数。 41 oDiv.style.left = disL + ( ev.clientX - disX ) + 'px'; //修改Left 值 42 break; 43 44 case 'right': 45 oDiv.style.width = disW + ( ev.clientX - disX ) + 'px'; 46 break; 47 48 } 49 50 } 51 52 document.onmouseup = function() { 53 document.onmousemove = document.onmouseup = null; 54 } 55 56 return false; 57 58 } 59 60 } 61 </script> 62 </head> 63 64 <body> 65 <div id="div1"></div> 66 </body> 67 </html>
模拟滚动条控制内容滚动：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;} 8 #div2 { 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;} 9 #div3 { 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;} 10 #div4 { position: absolute; left: 0; top: 0;} 11 </style> 12 <script> 13 window.onload = function() { 14 15 var oDiv1 = document.getElementById('div1'); 16 var oDiv2 = document.getElementById('div2'); 17 var oDiv3 = document.getElementById('div3'); 18 var oDiv4 = document.getElementById('div4'); 19 20 var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight; 21 22 oDiv2.onmousedown = function(ev) { 23 24 var ev = ev || event; 25 26 var disY = ev.clientY - this.offsetTop; 27 28 document.onmousemove = function(ev) { 29 30 var ev = ev || event; 31 32 var T = ev.clientY - disY; 33 34 if ( T < 0 ) { 35 T = 0; 36 } else if ( T > iMaxTop ) { 37 T = iMaxTop; 38 } 39 40 oDiv2.style.top = T + 'px'; 41 42 var iScale = T / iMaxTop; //得到一个0 - 1之间的比例 43 44 document.title = iScale; 45 46 oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px'; //设置目标元素的left值 47 48 } 49 50 document.onmouseup = function() { 51 52 document.onmousemove = document.onmouseup = null; 53 54 } 55 56 return false; 57 58 } 59 60 } 61 </script> 62 </head> 63 64 <body> 65 <div id="div1"> 66 <div id="div2"></div> 67 </div> 68 <div id="div3"> 69 <div id="div4"> 70 搜索设置|百度首页|登录注册 71 新闻 网页 贴吧 知道 音乐 图片 视频 地图 文库 更多» 72 推荐 : 用手机随时随地上百度 73 其他人还搜 74 75 烤鱼 76 77 脆豆腐 78 79 川北凉粉 80 81 鱼豆腐 82 妙味课堂 - 首页 javascript培训|前端开发|javascript教程|... 83 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时... 84 www.miaov.com/ 2013-9-20 - 百度快照 85 在北京市搜索妙味_百度地图 86 87 A 妙味正宗川味小吃全景 88 89 6条评论 团 90 91 地址：北京海淀区成府路28号华联商厦... 92 93 电话：(010)62660082 94 95 B 妙味居全景 96 97 地址：北京昌平区上庄路117号 98 99 C 妙味莱早餐 100 101 地址：永安路5-6 附近 102 103 查看全部8条结果>> 104 105 map.baidu.com 106 妙味教程网 107 妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站... 108 www.178code.com/ 2013-10-27 109 - 百度快照 110 妙味_百度百科 111 112 读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而... 113 读音 - 词语解释 114 baike.baidu.com/ 2013-04-29 115 妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图 116 专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、... 117 bj.city8.com/canyinfuwu/... 2013-07-19 118 - 百度快照 119 妙味茶馆 - Powered by Discuz! 120 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、... 121 42.96.185.107/ 2013-12-16 122 - 百度快照 123 妙味来电话,地址,价格,营业时间(图)-西安-大众点评网 124 妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ... 125 www.dianping.com/shop/8833... 2013-06-02 126 - 百度快照 127 妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网 128 妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网 129 s.114chn.com/s-gg5icd1i 2013-12-19 130 - 百度快照 131 【妙味来团购】(4.9折)-大众点评网团购西安站 132 西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。 133 t.dianping.com/deal/320... 2013-08-29 134 - 百度快照 135 妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制 136 文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573 137 pan.baidu.com/share/l...?shareid=279... 2013-08-28 138 - 百度快照 139 140 12345678910下一页>百度为您找到相关结果约2,450,000个 141 相关搜索 妙味课堂 妙味课堂javascript 妙味vip 妙味酸奶 妙味烤鱼 142 味妙烤鱼吧 妙味茶馆 妙味牛奶 妙味学堂 味妙烤鱼吧团购 143 结果中找 帮助 反馈意见 举报 高级搜索 144 ©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场 145 搜索设置|百度首页|登录注册 146 新闻 网页 贴吧 知道 音乐 图片 视频 地图 文库 更多» 147 推荐 : 用手机随时随地上百度 148 其他人还搜 149 150 烤鱼 151 152 脆豆腐 153 154 川北凉粉 155 156 鱼豆腐 157 妙味课堂 - 首页 javascript培训|前端开发|javascript教程|... 158 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时... 159 www.miaov.com/ 2013-9-20 - 百度快照 160 在北京市搜索妙味_百度地图 161 162 A 妙味正宗川味小吃全景 163 164 6条评论 团 165 166 地址：北京海淀区成府路28号华联商厦... 167 168 电话：(010)62660082 169 170 B 妙味居全景 171 172 地址：北京昌平区上庄路117号 173 174 C 妙味莱早餐 175 176 地址：永安路5-6 附近 177 178 查看全部8条结果>> 179 180 map.baidu.com 181 妙味教程网 182 妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站... 183 www.178code.com/ 2013-10-27 184 - 百度快照 185 妙味_百度百科 186 187 读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而... 188 读音 - 词语解释 189 baike.baidu.com/ 2013-04-29 190 妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图 191 专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、... 192 bj.city8.com/canyinfuwu/... 2013-07-19 193 - 百度快照 194 妙味茶馆 - Powered by Discuz! 195 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、... 196 42.96.185.107/ 2013-12-16 197 - 百度快照 198 妙味来电话,地址,价格,营业时间(图)-西安-大众点评网 199 妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ... 200 www.dianping.com/shop/8833... 2013-06-02 201 - 百度快照 202 妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网 203 妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网 204 s.114chn.com/s-gg5icd1i 2013-12-19 205 - 百度快照 206 【妙味来团购】(4.9折)-大众点评网团购西安站 207 西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。 208 t.dianping.com/deal/320... 2013-08-29 209 - 百度快照 210 妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制 211 文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573 212 pan.baidu.com/share/l...?shareid=279... 2013-08-28 213 - 百度快照 214 215 12345678910下一页>百度为您找到相关结果约2,450,000个 216 相关搜索 妙味课堂 妙味课堂javascript 妙味vip 妙味酸奶 妙味烤鱼 217 味妙烤鱼吧 妙味茶馆 妙味牛奶 妙味学堂 味妙烤鱼吧团购 218 结果中找 帮助 反馈意见 举报 高级搜索 219 ©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场 220 </div> 221 </div> 222 </body> 223 </html>
模拟滚动条控制其他元素的变化： 还可以做一些 滑动条等效果
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;} 8 #div2 { 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;} 9 #div3 { 500px; height: 0; background: green; position: absolute; left: 50px; top: 10px;} 10 </style> 11 <script> 12 window.onload = function() { 13 14 var oDiv1 = document.getElementById('div1'); 15 var oDiv2 = document.getElementById('div2'); 16 var oDiv3 = document.getElementById('div3'); 17 18 var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight; 19 20 oDiv2.onmousedown = function(ev) { 21 22 var ev = ev || event; 23 24 var disY = ev.clientY - this.offsetTop; 25 26 document.onmousemove = function(ev) { 27 28 var ev = ev || event; 29 30 var T = ev.clientY - disY; 31 32 if ( T < 0 ) { 33 T = 0; 34 } else if ( T > iMaxTop ) { 35 T = iMaxTop; 36 } 37 38 oDiv2.style.top = T + 'px'; 39 40 var iScale = T / iMaxTop; 41 42 document.title = iScale; 43 44 oDiv3.style.height = 500 * iScale + 'px'; 45 46 } 47 48 document.onmouseup = function() { 49 50 document.onmousemove = document.onmouseup = null; 51 52 } 53 54 return false; 55 56 } 57 58 } 59 </script> 60 </head> 61 62 <body> 63 <div id="div1"> 64 <div id="div2"></div> 65 </div> 66 <div id="div3"></div> 67 </body> 68 </html>