zoukankan      html  css  js  c++  java
  • event 事件 clientX 和clientY 配合scrollTop使用, div跟着鼠标走

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#div1{
    				 200px;
    				height: 200px;
    				background: red;
    				position: absolute;
    				left: 0;
    			}
    		</style>
    		<script>
    			window.onload = function(){
    				//这样会出现一个问题 当body高度大于可是区出现滚动条的时候 鼠标oEvent.clientY是可视区的高度 而块是按body定位的
    				//出现滚动条后  div和鼠标位置就有了问题  怎么解决呢?clientY加上scrollTop就可以解决
    				document.onmousemove = function(ev){
    					
    					var oEvent = ev|| event;
    					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    					var oDiv = document.getElementById("div1");
    					
    					oDiv.style.left = oEvent.clientX + "px";
    					oDiv.style.top = oEvent.clientY +scrollTop+ "px";
    				}
    			}
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<div id="div1"></div>
    	</body>
    </html>
    

      

    函数的封装和如何使用

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#div1{
    				 200px;
    				height: 200px;
    				background: red;
    				position: absolute;
    				left: 0;
    			}
    		</style>
    		<script>
    			
    			function getPos(ev)
    			{
    				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    				
    				return { x:ev.clientX + scrollLeft  , y:ev.clientY + scrollTop};
    			}
    			window.onload = function(){
    
    				document.onmousemove = function(ev){
    					
    					var oEvent = ev|| event;
    					var oDiv = document.getElementById("div1");
    					
    					//函数的使用
    					var pos = getPos(oEvent);
    
    					oDiv.style.left = pos.x + "px";
    					oDiv.style.top = pos.y + "px";
    				}
    			}
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<div id="div1"></div>
    	</body>
    </html>
    

      

  • 相关阅读:
    008 同步
    007 优雅的关闭线程
    006 线程中的join方法
    005 线程ID和线程的优先级
    004 后台线程
    003 Thread的构造
    群发 图片和语音失败原因是 ,返回 content是 null,
    状态,
    Shape Of My Heart
    转码 的状态,嘿嘿,小bug,少了一个 !
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5268524.html
Copyright © 2011-2022 走看看