[英]How to make an image (div) follow the cursor within a website?
此圖像是游標Trailimage的靜態div副本。 一個是固定的,另一個跟隨光標。 如何編碼靜態div圖像以跟隨光標?
參閱此圖片http://deverexdrawer.deviantart.com/art/Trailimage-538913342
Trailimage JavaScript摘錄
var trailimage=["images/contact/gardening-glove-cursor.png", , ]
var offsetfrommouse=[-110,5]
var displayduration=0
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')
function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
</script>
靜態div圖片
...<img border="0" src="'+trailimage[0]+'"
onmousedown="this.src=trailimage[1]"
onmouseup="this.src=trailimage[0]" />...
假設
var trailimage=[
"images/contact/gardening-glove-cursor.png",
"images/contact/gardening-glove-cursor_down.png" ]
嘗試這個
http://jsfiddle.net/n4foofvm/1/
HTML
<div id="movingDiv">
<img id="barber" class="barber-image" src="1.jpg" />
</div>
CSS
#movingDiv{
width:20px;
height:20px;
position:absolute;
}
JavaScript的
$(document).mousemove(function(e){
$("#movingDiv").css({left:e.pageX, top:e.pageY});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.