js實現(xiàn)磚頭在頁面拖拉效果
更新時間：2020年11月20日 14:14:22 作者：烽火戲諸諸諸侯
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)磚頭在頁面拖拉效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用js實現(xiàn)一個磚頭在頁面，但鼠標(biāo)點擊拖動時，磚頭在頁面上形成拖拉效果：
剛開始時：
鼠標(biāo)點擊拖動后：
實現(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)文章
這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下2016-05-05
touch.js 拖動、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢）功能代碼
這篇文章主要介紹了touch.js 拖動、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢)功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了js獲取數(shù)組中的最大值的9種方法，以及每種方法的工作原理和用法，文中的示例代碼講解詳細(xì)，需要的可以參考下2023-08-08
這篇文章主要介紹了el-select加上搜索查詢時,限制開頭空格輸入的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明
這篇文章主要介紹了基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明,需要的朋友可以參考下2017-07-07
JavaScript實現(xiàn)網(wǎng)頁對象拖放功能的方法
這篇文章主要介紹了JavaScript實現(xiàn)網(wǎng)頁對象拖放功能的方法,涉及javascript針對瀏覽器的判斷、事件愛你的添加與移除等相關(guān)操作技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript中提供了Date對象來進(jìn)行時間和日期的計算，這里簡單的介紹下， 方便需要的朋友2013-03-03
這篇文章主要為大家介紹了Javascript File和Blob，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12![JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false](http://img.jbzj.com/images/xgimg/bcimg8.png)
JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false
這篇文章主要給大家介紹了關(guān)于JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12