js實(shí)現(xiàn)簡(jiǎn)單圖片拖拽效果
更新時(shí)間：2021年02月22日 10:12:30 作者：qq_44801336
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單圖片拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單圖片拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下
//圖片需要自己導(dǎo)入
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>在當(dāng)前顯示區(qū)范圍內(nèi)實(shí)現(xiàn)點(diǎn)不到的小方塊</title>
<style>
div{position:fixed;width:100px;height:100px;
background-image:url(images/xiaoxin.gif);
background-size:100%;
}
</style>
</head>
<body>
<div id="pop"></div>
<script>
let pop = document.getElementById("pop")
//定義開關(guān)變量,用于控制圖片是否跟隨鼠標(biāo)移動(dòng)
let canMove = false;
//在開始拖拽時(shí),就保存鼠標(biāo)距div左上角的相對(duì)位置
let offsetX,offsetY;
//當(dāng)在pop上按下鼠標(biāo)時(shí)
pop.onmousedown=function(e){
//可以開始拖動(dòng)
canMove=true;
offsetX=e.offsetX;
offsetY=e.offsetY;
}
//當(dāng)鼠標(biāo)在窗口移動(dòng)時(shí)
window.onmousemove=function(e){
//只有當(dāng)pop可以移動(dòng)時(shí)
if(canMove==true){
//讓pop跟隨鼠標(biāo)移動(dòng)
//開始拖拽時(shí)，立刻獲得鼠標(biāo)距圖片左上角的相對(duì)位置
//求pop的top和left
let left=e.clientX-offsetX;
let top=e.clientY-offsetY;
//設(shè)置pop的top和left屬性
pop.style.left=left+"px";
pop.style.top=top+"px";
}
}
//當(dāng)在pop上抬起鼠標(biāo)按鍵時(shí)
pop.onmouseup=function(){
//停止拖拽
canMove=false
}
</script>
</body>
</html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Javascript寫入txt和讀取txt文件的方法,需要的朋友可以參考下2014-02-02
js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下2014-04-04
本文主要介紹了幾種響應(yīng)式文字的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法,實(shí)例分析了javascript操作頁面元素滾動(dòng)效果的方法,需要的朋友可以參考下2015-04-04
基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
這篇文章主要為大家詳細(xì)介紹了HTML5本地圖片裁剪并上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁面(案例)
這篇文章主要介紹了前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁面(案例),需要的朋友可以參考下2023-03-03
一頁面多XMLHttpRequest對(duì)象...2007-01-01
微信小程序轉(zhuǎn)發(fā)事件實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序轉(zhuǎn)發(fā)事件實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
解決Layui當(dāng)中的導(dǎo)航條動(dòng)態(tài)添加后渲染失敗的問題
今天小編就為大家分享一篇解決Layui當(dāng)中的導(dǎo)航條動(dòng)態(tài)添加后渲染失敗的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09