簡體   English   中英

如何使圖片(div)跟隨網站中的光標?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM