js實現(xiàn)磚頭在頁面拖拉效果
更新時間：2020年11月20日 14:14:22 作者：烽火戲諸諸諸侯
這篇文章主要為大家詳細介紹了js實現(xiàn)磚頭在頁面拖拉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用js實現(xiàn)一個磚頭在頁面，但鼠標點擊拖動時，磚頭在頁面上形成拖拉效果：
剛開始時：
鼠標點擊拖動后：
實現(xiàn)代碼：
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#zhuantou{
width:120px;
height:60px;
background-image:url(1.jpg);
position:fixed;
left:100px;
top:50px;
}
</style>
<body>
<div id="zhuantou">
</div>
<script>
var zt=document.querySelector("#zhuantou");
var isPressed=false;
var offsetX=0;
var offsetY=0;
zt.onmousedown=function(event){
isPressed=true;
this.style.cursor="move";
offsetX=event.offsetX;
offsetY=event.offsetY;
};
zt.onmouseup=function(){
isPressed=false;
this.style.cursor="default";
};
zt.onmousemove=function(event){
if(!isPressed){
return;
}
zt.style.left=(event.clientX-offsetX)+"px";
zt.style.top=(event.clientY-offsetX)+"px";
};
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)更換頭像功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了JS左右無縫輪播功能,結(jié)合完整實例形式分析了javascript事件響應(yīng)及頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JS 事件綁定函數(shù)代碼，解決了瀏覽器兼容，現(xiàn)在可以兼容IE6 7 8 FF 谷歌2010-04-04
這篇文章主要介紹了javascript監(jiān)聽鼠標滾輪事件淺析,使用具體例子說明,同時考慮了不同的瀏覽器,需要的朋友可以參考下2014-06-06
BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題
這篇文章主要介紹了BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序之發(fā)送短信倒計時功能,需要的朋友可以參考下2017-08-08
表格同行中存在元素的相互調(diào)用，如何保證元素能夠被同行不同列的其他方框使用呢？下面通過實例代碼給大家介紹下，一起看看吧2016-12-12
URL的參數(shù)中有加號傳值變?yōu)榭崭竦膯栴}(URL特殊字符)
今天在調(diào)試客戶端向服務(wù)器傳遞參數(shù)時，參數(shù)中的“+”全部變成了空格，原因是URL中默認的將“+”號轉(zhuǎn)義了，經(jīng)過以下步驟解決了，需要的朋友可以參考一下2016-11-11
JavaScript知識點總結(jié)(四)之邏輯OR運算符詳解
這篇文章主要介紹了JavaScript知識點總結(jié)(四)之邏輯OR運算符詳解的相關(guān)資料,在JavaScript中，邏輯OR運算符用||表示。本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-05-05
JS動態(tài)的把左邊列表添加到右邊的實現(xiàn)代碼(可上下移動)
在javascript前端開發(fā)過程中經(jīng)常見到動態(tài)的把左邊列表添加到右邊，基于js代碼怎么實現(xiàn)的呢？今天小編通過本文給大家介紹下js 左邊列表添加到右邊的實現(xiàn)方法，感興趣的朋友一起看看吧2016-11-11