JS之鼠标跟随

需求：点击页面的任何地方，图片跟随鼠标移动到点击位置
思路：获取鼠标在页面中的位置，然后图片缓慢运动到鼠标点击的位置(兼容ie6,7做pageY和pageX)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
body{
    height: 5000px;
}
img{
    position: absolute;
    padding: 10px 0;
    cursor: pointer;
    border:1px solid #ccc;
}
</style>
</head>
<body>
<img src="../images/img.jpg" width="100"/>
<script type="text/javascript">
//需求：点击页面的任何地方，图片跟随鼠标移动到点击位置
//思路：获取鼠标在页面中的位置，然后图片缓慢运动到鼠标点击的位置
//兼容ie6,7做pageY和pageX
//原理：鼠标在页面的位置 = 被卷去的部分 + 可视区域部分
//步骤：
//1.老三步
//2.获取鼠标在页面的位置
//3.利用缓动原理，慢慢的运动到指定位置(包括左右和上下)

//获取相关元素并绑定事件
var img = document.getElementsByTagName("img")[0];
var timer =null;
var targetx = 0;
var targety = 0;
var leaderx = 0;
var leadery = 0;
//给整个文档绑定点击事件获取鼠标的位置
document.onclick = function(event){
    //兼容获取事件对象
    event = event || window.event;
    //鼠标在页面的位置 = 被卷去的部分+可视区域部分
    var pagex = event.pageX || scroll().left + event.clientX;
    var pagey = event.pageY || scroll().top + event.clientY;
    targety = pagey-30;
    targetx = pagex-50;
    //利用缓动动画
    //要用定时器，先清定时器
    clearInterval(timer);
    timer = setInterval(function(){
        //为盒子的位置获取X值
        leaderx = img.offsetLeft;
        //获取步长
        var stepx = (targetx - leaderx)/10;
        //二次处理步长
        stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
        leaderx =leaderx +stepx;
        //赋值
        img.style.left = leaderx +"px";

        //为盒子的位置获取Y值
        leadery = img.offsetTop;
        //获取步长
        var stepy = (targety - leadery)/10;
        //二次获取步长
        stepy= stepy>0?Math.ceil(stepy):Math.floor(stepy);
        leadery = leadery +stepy; 
        //赋值
        img.style.top = leadery + "px";

        //清除定时器
        if (Math.abs(targety - img.offsetTop)<=Math.abs(stepy)&&Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)) {
            img.style.top = targety + "px";
            img.style.left = targetx +"px";
            clearInterval(timer);
        }
    },30);
}

</script>
</body>
</html>

 

posted @ 2018-01-02 15:12  乖乖乖码  阅读(434)  评论(0)    收藏  举报