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