事件深入应用

﹏ヽ暗。殇╰゛Y 2022-07-14 01:17 127阅读 0赞

**1.拖拽**

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} </style> <script> window.onload = function() { /* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; } document.onmouseup = function(){ document.onmousemove = document.onmouseup = null; } } } </script> </head> <body> <div id="div1"></div> <div style="width: 100px; height: 100px; background: green; position: absolute; left: 400px; top: 200px;"></div> </body> </html>

**2拖拽的问题**

1.拖拽的时候，如果有文字被选中，会产生问题 原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果 解决： 标准：阻止默认行为return false;

非标准ie：全局捕获if ( oDiv.setCapture ) { oDiv.setCapture();//设置全局捕获 ，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续 发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发 } 释放全局捕获 releaseCapture(); if ( oDiv.releaseCapture ) { oDiv.releaseCapture(); }
    
    
     
     
     
     
     
    
    
    
     
     
     <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} </style> <script> window.onload = function() { /* 1.拖拽的时候，如果有文字被选中，会产生问题 原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果 解决： 标准：阻止默认行为 非标准ie：全局捕获 */ var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; if ( oDiv.setCapture ) { oDiv.setCapture(); } document.onmousemove = function(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; //释放全局捕获 releaseCapture(); if ( oDiv.releaseCapture ) { oDiv.releaseCapture(); } } return false; } } </script> </head> <body> jafldsfjdsjfkl <div id="div1"></div> </body> </html> 
    
      
       
       
        
      
       
     
     
    3.拖拽图片
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute;}
    #img1 { position: absolute;}
    </style>
    <script>
    window.onload = function() {
    	
    	/*
    	1.拖拽的时候，如果有文字被选中，会产生问题
    		原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
    			解决：
    				标准：阻止默认行为
    				非标准ie：全局捕获
    	拖拽图片会有问题，原因，解决的办法同上
    	*/
    	
    	var oDiv = document.getElementById('div1');
    	var oImg = document.getElementById('img1');
    	
    	oImg.onmousedown = function(ev) {
    		var ev = ev || event;
    		
    		var disX = ev.clientX - this.offsetLeft;
    		var disY = ev.clientY - this.offsetTop;
    		
    		if ( oImg.setCapture ) {
    			oImg.setCapture();
    		}
    		
    		document.onmousemove = function(ev) {
    			var ev = ev || event;
    			
    			oImg.style.left = ev.clientX - disX + 'px';
    			oImg.style.top = ev.clientY - disY + 'px';
    		}
    		
    		document.onmouseup = function() {
    			document.onmousemove = document.onmouseup = null;
    			//释放全局捕获 releaseCapture();
    			if ( oImg.releaseCapture ) {
    				oImg.releaseCapture();
    			}
    		}
    		
    		return false;
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	jafldsfjdsjfkl
    	<div id="div1"></div>
        <img src="1.jpg" id="img1" />
    </body>
    </html> 
     
     
     
     
    
    
     4.拖拽的封装
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute;}
    #img1 { position: absolute;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	var oImg = document.getElementById('img1');
    	
    	drag(oImg);
    	
    	drag(oDiv);
    	
    	function drag(obj) {
    		
    		obj.onmousedown = function(ev) {
    			var ev = ev || event;
    			
    			var disX = ev.clientX - this.offsetLeft;
    			var disY = ev.clientY - this.offsetTop;
    			
    			if ( obj.setCapture ) {
    				obj.setCapture();
    			}
    			
    			document.onmousemove = function(ev) {
    				var ev = ev || event;
    				
    				obj.style.left = ev.clientX - disX + 'px';
    				obj.style.top = ev.clientY - disY + 'px';
    			}
    			
    			document.onmouseup = function() {
    				document.onmousemove = document.onmouseup = null;
    				//释放全局捕获 releaseCapture();
    				if ( obj.releaseCapture ) {
    					obj.releaseCapture();
    				}
    			}
    			
    			return false;
    			
    		}
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1"></div>
        <img src="1.jpg" id="img1" />
    </body>
    </html>
     
    
        
         
         
          
    
    
        
         
     
    
    
     
     5.限制范围的拖拽
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute;}
    #img1 { position: absolute;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	var oImg = document.getElementById('img1');
    	
    	drag(oImg);
    	
    	drag(oDiv);
    	
    	function drag(obj) {
    		
    		obj.onmousedown = function(ev) {
    			var ev = ev || event;
    			
    			var disX = ev.clientX - this.offsetLeft;
    			var disY = ev.clientY - this.offsetTop;
    			
    			if ( obj.setCapture ) {
    				obj.setCapture();
    			}
    			
    			document.onmousemove = function(ev) {
    				var ev = ev || event;
    				
    				var L = ev.clientX - disX;
    				var T = ev.clientY - disY;
    				
    				if ( L < 0 ) {
    					L = 0;
    				} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
    					L = document.documentElement.clientWidth - obj.offsetWidth;
    				}
    				
    				if ( T < 0 ) {
    					T = 0;
    				} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
    					T = document.documentElement.clientHeight - obj.offsetHeight;
    				}
    				
    				obj.style.left = L + 'px';
    				obj.style.top = T + 'px';
    				
    			}
    			
    			document.onmouseup = function() {
    				document.onmousemove = document.onmouseup = null;
    				if ( obj.releaseCapture ) {
    					obj.releaseCapture();
    				}
    			}
    			
    			return false;
    			
    		}
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1"></div>
        <img src="1.jpg" id="img1" />
    </body>
    </html> 
     
    
    
     
     6.磁性吸附
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute;}
    #img1 { position: absolute;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	var oImg = document.getElementById('img1');
    	
    	drag(oImg);
    	
    	drag(oDiv);
    	
    	function drag(obj) {
    		
    		obj.onmousedown = function(ev) {
    			var ev = ev || event;
    			
    			var disX = ev.clientX - this.offsetLeft;
    			var disY = ev.clientY - this.offsetTop;
    			
    			if ( obj.setCapture ) {
    				obj.setCapture();
    			}
    			
    			document.onmousemove = function(ev) {
    				var ev = ev || event;
    				
    				var L = ev.clientX - disX;
    				var T = ev.clientY - disY;
    				
    				if ( L < 100 ) {
    					L = 0;
    				} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
    					L = document.documentElement.clientWidth - obj.offsetWidth;
    				}
    				
    				if ( T < 0 ) {
    					T = 0;
    				} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
    					T = document.documentElement.clientHeight - obj.offsetHeight;
    				}
    				
    				obj.style.left = L + 'px';
    				obj.style.top = T + 'px';
    				
    			}
    			
    			document.onmouseup = function() {
    				document.onmousemove = document.onmouseup = null;
    				if ( obj.releaseCapture ) {
    					obj.releaseCapture();
    				}
    			}
    			
    			return false;
    			
    		}
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1"></div>
        <img src="1.jpg" id="img1" />
    </body>
    </html> 
    
          
           
           
            
    
    
          
           
     
    
     
     
    7.碰撞检测
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
    #img1 { position: absolute; left: 500px; top: 200px;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	var oImg = document.getElementById('img1');
    	
    	drag(oDiv);
    	
    	function drag(obj) {
    		
    		obj.onmousedown = function(ev) {
    			var ev = ev || event;
    			
    			var disX = ev.clientX - this.offsetLeft;
    			var disY = ev.clientY - this.offsetTop;
    			
    			if ( obj.setCapture ) {
    				obj.setCapture();
    			}
    			
    			document.onmousemove = function(ev) {
    				var ev = ev || event;
    				
    				var L = ev.clientX - disX;
    				var T = ev.clientY - disY;
    				
    				var L1 = L;
    				var R1 = L + obj.offsetWidth;
    				var T1 = T;
    				var B1 = T + obj.offsetHeight;
    				
    				var L2 = oImg.offsetLeft;
    				var R2 = L2 + oImg.offsetWidth;
    				var T2 = oImg.offsetTop;
    				var B2 = T2 + oImg.offsetHeight;
    				
    				if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
    					oImg.src = '1.jpg';
    				} else {
    					oImg.src = '2.jpg';
    				}
    				
    				obj.style.left = L + 'px';
    				obj.style.top = T + 'px';
    				
    			}
    			
    			document.onmouseup = function() {
    				document.onmousemove = document.onmouseup = null;
    				if ( obj.releaseCapture ) {
    					obj.releaseCapture();
    				}
    			}
    			
    			return false;
    			
    		}
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1"></div>
        <img src="1.jpg" id="img1" />
    </body>
    </html>
     
    
           
            
            
             
    
    
           
            
     
     
     
     8.拖拽改变层大小
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	
    	oDiv.onmousedown = function(ev) {
    		
    		var ev = ev || event;
    		
    		var disW = this.offsetWidth;
    		var disX = ev.clientX;
    		var disL = this.offsetLeft;
    		
    		var b = '';
    		
    		if ( disX > disL + disW - 10 ) {
    			//alert( 'right' );
    			b = 'right';
    		}
    		if ( disX < disL + 10 ) {
    			//alert( 'left' );
    			b = 'left';
    		}
    		
    		document.onmousemove = function(ev) {
    			
    			var ev = ev || event;
    			
    			switch( b ) {
    				
    				case 'left':
    					oDiv.style.width = disW - ( ev.clientX - disX ) + 'px';
    					oDiv.style.left = disL + ( ev.clientX - disX ) + 'px';
    					break;
    					
    				case 'right':
    					oDiv.style.width = disW + ( ev.clientX - disX ) + 'px';
    					break;
    				
    			}
    			
    		}
    		
    		document.onmouseup = function() {
    			document.onmousemove = document.onmouseup = null;
    		}
    		
    		return false;
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1"></div>
    </body>
    </html> 
     
    
    
     
     9.模拟滚动条
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
    #div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv1 = document.getElementById('div1');
    	var oDiv2 = document.getElementById('div2');
    	
    	oDiv2.onmousedown = function(ev) {
    		
    		var ev = ev || event;
    		
    		var disY = ev.clientY - this.offsetTop;
    		
    		document.onmousemove = function(ev) {
    			
    			var ev = ev || event;
    			
    			oDiv2.style.top = ev.clientY - disY + 'px';
    			
    		}
    		
    		document.onmouseup = function() {
    			
    			document.onmousemove = document.onmouseup = null;
    			
    		}
    		
    		return false;
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1">
        	<div id="div2"></div>
        </div>
    </body>
    </html>
     
    
             
              
              
               
    
    
             
              
     
    
    
     
     
     10.模拟滚动条-限制范围
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
    #div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv1 = document.getElementById('div1');
    	var oDiv2 = document.getElementById('div2');
    	
    	var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
    	
    	oDiv2.onmousedown = function(ev) {
    		
    		var ev = ev || event;
    		
    		var disY = ev.clientY - this.offsetTop;
    		
    		document.onmousemove = function(ev) {
    			
    			var ev = ev || event;
    			
    			var T = ev.clientY - disY;
    			
    			if ( T < 0 ) {
    				T = 0;
    			} else if ( T > iMaxTop ) {
    				T = iMaxTop;
    			}
    			
    			oDiv2.style.top = T + 'px';
    			
    		}
    		
    		document.onmouseup = function() {
    			
    			document.onmousemove = document.onmouseup = null;
    			
    		}
    		
    		return false;
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1">
        	<div id="div2"></div>
        </div>
    </body>
    </html>
     
     
     
    
    
     
     11.模拟滚动条控制内容滚动
     <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;} #div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;} #div3 {width: 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;} #div4 { position: absolute; left: 0; top: 0;} </style> <script> window.onload = function() { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); var oDiv4 = document.getElementById('div4'); var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight; oDiv2.onmousedown = function(ev) { var ev = ev || event; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev) { var ev = ev || event; var T = ev.clientY - disY; if ( T < 0 ) { T = 0; } else if ( T > iMaxTop ) { T = iMaxTop; } oDiv2.style.top = T + 'px'; var iScale = T / iMaxTop; document.title = iScale; oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; } return false; } } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> <div id="div3"> <div id="div4"> 搜索设置|百度首页|登录注册 新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多» 推荐 : 用手机随时随地上百度 其他人还搜 烤鱼 脆豆腐 川北凉粉 鱼豆腐 妙味课堂 - 首页 javascript培训|前端开发|javascript教程|... 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时... www.miaov.com/ 2013-9-20 - 百度快照 在北京市搜索妙味_百度地图 A 妙味正宗川味小吃全景 6条评论 团 地址：北京海淀区成府路28号华联商厦... 电话：(010)62660082 B 妙味居全景 地址：北京昌平区上庄路117号 C 妙味莱早餐 地址：永安路5-6 附近 查看全部8条结果>> map.baidu.com 妙味教程网 妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站... www.178code.com/ 2013-10-27 - 百度快照 妙味_百度百科 读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而... 读音 - 词语解释 baike.baidu.com/ 2013-04-29 妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图 专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、... bj.city8.com/canyinfuwu/... 2013-07-19 - 百度快照 妙味茶馆 - Powered by Discuz! 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、... 42.96.185.107/ 2013-12-16 - 百度快照 妙味来电话,地址,价格,营业时间(图)-西安-大众点评网 妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ... www.dianping.com/shop/8833... 2013-06-02 - 百度快照 妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网 妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网 s.114chn.com/s-gg5icd1i 2013-12-19 - 百度快照 【妙味来团购】(4.9折)-大众点评网团购西安站 西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。 t.dianping.com/deal/320... 2013-08-29 - 百度快照 妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制 文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573 pan.baidu.com/share/l...?shareid=279... 2013-08-28 - 百度快照 12345678910下一页>百度为您找到相关结果约2,450,000个 相关搜索 妙味课堂 妙味课堂javascript 妙味vip 妙味酸奶 妙味烤鱼 味妙烤鱼吧 妙味茶馆 妙味牛奶 妙味学堂 味妙烤鱼吧团购 结果中找 帮助 反馈意见 举报 高级搜索 ©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场 搜索设置|百度首页|登录注册 新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多» 推荐 : 用手机随时随地上百度 其他人还搜 烤鱼 脆豆腐 川北凉粉 鱼豆腐 妙味课堂 - 首页 javascript培训|前端开发|javascript教程|... 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时... www.miaov.com/ 2013-9-20 - 百度快照 在北京市搜索妙味_百度地图 A 妙味正宗川味小吃全景 6条评论 团 地址：北京海淀区成府路28号华联商厦... 电话：(010)62660082 B 妙味居全景 地址：北京昌平区上庄路117号 C 妙味莱早餐 地址：永安路5-6 附近 查看全部8条结果>> map.baidu.com 妙味教程网 妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站... www.178code.com/ 2013-10-27 - 百度快照 妙味_百度百科 读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而... 读音 - 词语解释 baike.baidu.com/ 2013-04-29 妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图 专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、... bj.city8.com/canyinfuwu/... 2013-07-19 - 百度快照 妙味茶馆 - Powered by Discuz! 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、... 42.96.185.107/ 2013-12-16 - 百度快照 妙味来电话,地址,价格,营业时间(图)-西安-大众点评网 妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ... www.dianping.com/shop/8833... 2013-06-02 - 百度快照 妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网 妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网 s.114chn.com/s-gg5icd1i 2013-12-19 - 百度快照 【妙味来团购】(4.9折)-大众点评网团购西安站 西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。 t.dianping.com/deal/320... 2013-08-29 - 百度快照 妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制 文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573 pan.baidu.com/share/l...?shareid=279... 2013-08-28 - 百度快照 12345678910下一页>百度为您找到相关结果约2,450,000个 相关搜索 妙味课堂 妙味课堂javascript 妙味vip 妙味酸奶 妙味烤鱼 味妙烤鱼吧 妙味茶馆 妙味牛奶 妙味学堂 味妙烤鱼吧团购 结果中找 帮助 反馈意见 举报 高级搜索 ©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场 </div> </div> </body> </html> 
    
               
                
                
                 
    
    
               
                
     
    
    
     
     
    
    
     12.模拟滚动条控制其他元素的变化
     
     
     <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
    #div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
    #div3 {width: 500px; height: 0; background: green; position: absolute; left: 50px; top: 10px;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv1 = document.getElementById('div1');
    	var oDiv2 = document.getElementById('div2');
    	var oDiv3 = document.getElementById('div3');
    	
    	var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
    	
    	oDiv2.onmousedown = function(ev) {
    		
    		var ev = ev || event;
    		
    		var disY = ev.clientY - this.offsetTop;
    		
    		document.onmousemove = function(ev) {
    			
    			var ev = ev || event;
    			
    			var T = ev.clientY - disY;
    			
    			if ( T < 0 ) {
    				T = 0;
    			} else if ( T > iMaxTop ) {
    				T = iMaxTop;
    			}
    			
    			oDiv2.style.top = T + 'px';
    			
    			var iScale = T / iMaxTop;
    			
    			document.title = iScale;
    			
    			oDiv3.style.height = 500 * iScale + 'px';
    			
    		}
    		
    		document.onmouseup = function() {
    			
    			document.onmousemove = document.onmouseup = null;
    			
    		}
    		
    		return false;
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1">
        	<div id="div2"></div>
        </div>
        <div id="div3"></div>
    </body>
    </html>