bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

JavaScript鼠標拖拽事件詳解

本文實例為大家分享了js鼠標拖拽事件的詳細實現代碼，供大家參考，具體內容如下

在成都網站制作、成都做網站中從網站色彩、結構布局、欄目設置、關鍵詞群組等細微處著手，突出企業的產品/服務/品牌，幫助企業鎖定精準用戶，提高在線咨詢和轉化，使成都網站營銷成為有效果、有回報的無錫營銷推廣。創新互聯專業成都網站建設十載了，客戶滿意度97.8%，歡迎成都創新互聯客戶聯系。

圖片如下:

JavaScript鼠標拖拽事件詳解

css代碼

<style>
 *{
 margin:0;
 padding:0;
 }
 #box{
 width: 200px;
 height: 200px;
 background: url("./img/aio.png") no-repeat;
 background-size: cover;
 position: absolute;/*定位元素 父級元素window就是初始包含塊*/
 top:0;
 left:0;
 }
</style>

html代碼

<div id="box"></div>

js代碼

<script>
 //獲取標簽
 var box=document.getElementById("box");
 var body=document.body;
 var x,y;//全局作用域
 //鼠標按下事件 0級
 box.onmousedown=function(e) {//傳入形參e
 var mx=e.clientX;//鼠標距離瀏覽器左
 var my=e.clientY;//鼠標距離瀏覽器上
 var bx=box.offsetLeft;//盒子距離瀏覽器左
 var by=box.offsetTop;//盒子距離瀏覽器上
 x=mx-bx;//實際盒子距離的瀏覽器左
 y=my-by;//實際盒子距離的瀏覽器上
 //鼠標移動事件 0級
 body.onmousemove=function(e) {//拿到全局x、y、
  //獲取當前鼠標移動到的坐標點
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距離瀏覽器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";

 };
 //鼠標彈起事件(松開)
 box.onmouseup=function(e) {
  body.onmousemove=null;//不做任何操作//dom0級事件解除事件綁定
  //獲取當前鼠標移動到的坐標點
  var mx=e.clientX;
  var my=e.clientY;
  //盒子距離瀏覽器
  box.style.left=mx-x +"px";
  box.style.top=my-y +"px";
 }
 };
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

分享名稱：JavaScript鼠標拖拽事件詳解
本文網址：http://vcdvsql.cn/article42/jhgchc.html

成都網站建設公司_創新互聯，為您提供建站公司、網站制作、、企業網站制作、網站內鏈、網站策劃

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

外貿網站建設