溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“html的圖片移動代碼怎么寫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html的圖片移動代碼怎么寫”吧!
<!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;
//開關打開
isDown = true;
//設置樣式
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() {
//開關關閉
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的圖片移動代碼怎么寫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
