javascript實現(xiàn)完美拖拽效果
更新時間:2015年05月06日 10:39:15 投稿:hebedich
javascript實現(xiàn)的拖拽效果,可以把屏幕上的圖片拖動到任意地方,效果平滑,點擊圖片還可以從側(cè)邊展開圖片的詳細信息,非常好的相冊效果
拖拽的原理
1.獲取距離(鼠標的位置-odiv的外邊距)
2.理解什么時候用onmousemove事件
3.判斷是否過界
html代碼:
<div id="div1"></div>
css代碼:
#div1{width:100px;height:100px;background:red;position:absolute}
javascript代碼:
window.onload=function(){ var oDiv=document.getElementById("div1"); var x=0; var y=0; oDiv.onmousedown=function(ev){ var oEvent=ev||event; //鼠標的橫坐標減去div的offsetLeft x=oEvent.clientX-oDiv.offsetLeft; //鼠標的縱坐標減去div的offsetTop y=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var left=oEvent.clientX-x; var right=oEvent.clientY-y; //判斷左邊是否過界 if(left<0){ left=0; } //判斷右邊是否過界 else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){ left=document.documentElement.clientWidth-oDiv.offsetWidth; } //判斷上邊是否過界 if(right<0){ right=0; } //判斷下邊是否過界 else if(right>document.documentElenment.clientHeight){ right=document.documentElenment.clientHeight-oDiv.offsetHeight; } oDiv.style.left=left+"px"; oDiv.style.top=right+"px"; } document.onmouseup=function(){ //清空document的事件 document.onmousemove=null; document.onmouseup=null; } //解決低版本火狐bug,干掉系統(tǒng)默認 return false; } }
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
JavaScript實現(xiàn)時間表動態(tài)效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)時間表動態(tài)效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07原生js實現(xiàn)fadein 和 fadeout淡入淡出效果
這篇文章主要介紹了通過原生js實現(xiàn)fadein 和 fadeout淡入淡出效果,需要的朋友可以參考下2014-06-06JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實現(xiàn),需要的朋友可以參考一下2013-06-06