首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何制作一个图片(div)跟随光标在一个网站内?

如何制作一个图片(div)跟随光标在一个网站内?
EN

Stack Overflow用户
提问于 2015-06-11 10:59:40
回答 1查看 956关注 0票数 1

此图像是光标跟踪图像的静态div复制。一个是固定的,另一个是跟着光标。如何编码静态div图像以跟踪光标?

请参阅此图像http://deverexdrawer.deviantart.com/art/Trailimage-538913342

Trailimage javascript摘录

代码语言: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图像

代码语言:javascript
复制
...<img border="0" src="'+trailimage[0]+'"
onmousedown="this.src=trailimage[1]"   
onmouseup="this.src=trailimage[0]" />...

假设

代码语言:javascript
复制
var trailimage=[
  "images/contact/gardening-glove-cursor.png",
  "images/contact/gardening-glove-cursor_down.png" ]
EN

回答 1

Stack Overflow用户

发布于 2015-06-11 11:13:37

尝尝这个

http://jsfiddle.net/n4foofvm/1/

html

代码语言:javascript
复制
<div id="movingDiv">
    <img id="barber" class="barber-image" src="1.jpg" />
</div>

css

代码语言:javascript
复制
#movingDiv{
    width:20px;
    height:20px;
    position:absolute;
}

javascript

代码语言:javascript
复制
$(document).mousemove(function(e){
    $("#movingDiv").css({left:e.pageX, top:e.pageY});
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30778931

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档