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