![](/img/trans.png)
[英]cloning and clicking on a moving HTML5 Canvas element using Javascript
[英]Moving element with JavaScript in HTML5
我正在編寫一個Web應用程序,用戶可以在其中通過使用鼠標在div元素內拖動圖像來平移地圖。 不幸的是,我需要它能夠跨瀏覽器,以支持IE 6-9,Firefox,Chrome和Safari。 而且我陷入了一個框架,該框架限制了我可以使用javascript進行的操作,因此越簡單越好。 直到我添加了“!DOCTYPE html”,下面的代碼(了不起)才起作用。 怎么了 您將如何調試呢?
<!DOCTYPE html>
<html><head></head><body>
<style>
p{ width: 400px; background-color: gold;}
#caption {text-align: center; font-weight: bold;}
div div {
width:400px; height: 140px;
border: 1px solid green;
background-color: lightgreen;
display: block;
position: relative;
}
div div:hover {border-color: red;}
div > .img {
width: 200px; height: 100px; top: 10px; left: 20px;
position: absolute;
border: 2px solid black;
background-image: url('http://boallen.com/assets/images/randbitmap_true.png');
}
div > .img:hover {cursor: pointer; background-color: lightgray;}
</style>
<div>
<div>p
<span class="img" id="friend">bad ie</span>
</div>
<div id="thediv">Mouse in here and click<br></div>
</div>
<script>
var el = document.getElementById("thediv");
var img = document.getElementById('friend');
img.onmousedown = function (event) {
img.moving=true;
img.mouseX=(window.event ? window.event.x: event.clientX) - img.offsetLeft;
img.mouseY=(window.event ? window.event.y: event.clientY) - img.offsetTop;
el.innerHTML += 'Mouse DOWN ';
}
img.onmousemove = function (event) {
if(!img.moving) return;
img.style.left=(window.event ? window.event.x: event.clientX) - img.mouseX;
img.style.top=(window.event ? window.event.y: event.clientY) - img.mouseY;
stat.innerHTML += "M-M ";
}
img.onmouseup = function (event) {
this.moving = false;
el.innerHTML += 'Mouse released ';
}
</script>
</body>
</html>
(已在IE9,Firefox和Chrome上使用http://htmledit.squarefree.com/進行了測試)
一般而言,要進行調試,請使用調試器/ dom檢查器逐步進行調試。 查看正在應用的CSS。 查看哪些CSS規則能贏得級聯。 查看哪些CSS規則被刪除為無效。
left
和top
屬性接受長度而不是數字。 您尚未在值上放置任何單位。
(在怪癖模式下,某些瀏覽器認為99
表示99像素 ,而什么都不表示)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.