首页 > 移动平台 > 详细

js图片跟随鼠标移动

时间:2017-08-03 10:40:56      阅读:183      评论:0      收藏:0      [点我收藏+]
<div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/>
<img  id="hh"src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/>
</div>

<style>

div{width:500px;height:400px;margin:0 auto;border:1px solid red;position:relative}
img:nth-child(1){position:absolute;left:0;top:0;}
 img:nth-child(2){position:absolute;width:300px;height:200px;display:none;}
</style>

<script>

    document.images[0].onmousemove=function(){
    

    var hh=document.getElementById("hh");
    var x=event.offsetX;
    var y=event.offsetY;
    
        hh.style.display="block";
        hh.style.left=x+50+"px";
        hh.style.top=50+y+"px";
    };
    document.images[0].onmouseout=function(){hh.style.display="none";}
</script>

 

js图片跟随鼠标移动

原文:http://www.cnblogs.com/rain-null/p/7278383.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!