溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html的圖片移動代碼怎么寫

發(fā)布時間：2022-03-05 15:51:26 來源：億速云 閱讀：647 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“html的圖片移動代碼怎么寫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html的圖片移動代碼怎么寫”吧!

html的圖片移動（js）

<!DOCTYPE html>
<html>
<style>
*{padding: 0;margin: 0}
#open{
width: 300px;
height: 300px;
background-color: brown;
position: relative;
border-radius:50%;

}
#dv {
width:100px;
height:100px;
/*background-color:blue;*/
border-radius:50%;
position:relative;
}
</style>
<body>

<!--draggable 是否禁止拖曳-->
<img id="dv" src="http://temp.im/250x250/4CD964/fff" draggable="false" />
<br>
<!--<div id="open"></div>-->

<p id="img-left"></p>
<p id="img-top"></p>
<script>
//圖像移動方法
function ImgMove(ImgId){
//獲取元素

var dv = document.getElementById(ImgId);
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠標按下事件
dv.onmousedown = function(e) {
//獲取x坐標和y坐標
x = e.clientX;
y = e.clientY;

//獲取左部和頂部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//開關(guān)打開
isDown = true;
//設(shè)置樣式 
dv.style.cursor = 'move';
}
//鼠標移動
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//獲取x和y
var nx = e.clientX;
var ny = e.clientY;
//計算移動后的左偏移量和頂部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);

dv.style.left = nl + 'px';
dv.style.top = nt + 'px';

document.getElementById("img-left").innerHTML=dv.style.left.toString();
document.getElementById("img-top").innerHTML=dv.style.top.toString();

}
//鼠標抬起事件
dv.onmouseup = function() {
//開關(guān)關(guān)閉
isDown = false;
dv.style.cursor = 'default';
}

}

ImgMove('dv');

</script>
<script>
function ImgInto(num1Id){
var num1 = document.getElementById(num1Id);

return num1.style.top.toString();
}

</script>
</body>
</html>

到此，相信大家對“html的圖片移動代碼怎么寫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手