練習鼠標跟隨！以及拖拽

時間 2019-11-20

標籤練習鼠標跟隨以及简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<script>

另一種鼠標跟隨移動（也能夠製做成拖拽）
window.onload=function(){
   var xmouse=0;
   var ymouse=0;
   var odiv=document.getElementById("time");

   odiv.onmousedown=function(ev){
           var ev=ev||window.event;


       xmouse=ev.clientX-odiv.offsetLeft ;
       ymouse=ev.clientY-odiv.offsetTop ;

   document.onmousemove=function(ev){
       var ev=ev||window.event;


       odiv.style.left=ev.clientX-xmouse+"px";

       odiv.style.top=ev.clientY-ymouse+"px";
       if(odiv.style.left<=0){
           odiv.style.left=0;
           }
               if(odiv.style.top<=0){
           odiv.style.top=0;
           }
       }
   document.onmouseup=function(ev){
       var ev=ev||window.event;

       document.onmousemove=null;
       document.onmousedown=null;
   }
   }


}




</script>
<body>
<div style="position:relative; left:300px;top:300px; width: 100px;height: 100px;" id="time">老子要顯示時間</div>

</body>
</html>

html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。