码迷,mamicode.com
首页 > 移动开发 > 详细

js图片跟随鼠标移动

时间:2017-08-03 11:14:40      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:color   absolute   auto   document   osi   alt   img   eve   图片   

<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图片跟随鼠标移动

标签:color   absolute   auto   document   osi   alt   img   eve   图片   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!