JS实现跟随鼠标移动的div，和一串跟随鼠标的div，鼠标移入移出实现图片的颜色淡入淡出

1.一直跟着鼠标移动的div：原理是div的left和top值有oEvent.clientX+scrollLeft鼠标指针向对于浏览器页面（或客户区）的水平坐标+元素中滚动条的水平偏移

<!DOCTYPE html>
<html>
<head>
    <title>follow mouse</title>
</head>
<style type="text/css">
    #div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script type="text/javascript">
    document.onmousemove=function(ev){
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1');
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
        oDiv.style.left=oEvent.clientX+scrollLeft+'px';
        oDiv.style.top=oEvent.clientY+scrollTop+'px';

    }
</script>
<body>
<div id="div1"></div>
</body>
</html>

2.一串跟随鼠标移动的div们：用循环使多个div运动

yi<!DOCTYPE html>
<html>
<head>
    <title>一串跟随鼠标的div</title>
    <style type="text/css">
        div{width: 10px;height: 10px;background: blue;position: absolute;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');
            document.onmousemove=function(ev){
                var oEvent=ev||event;
                for(var i=aDiv.length-1;i>0;i--){
                    aDiv[i].style.left=aDiv[i-1].style.left;
                    aDiv[i].style.top=aDiv[i-1].style.top;
                }
                aDiv[0].style.left=oEvent.clientX+'px';
                aDiv[0].style.top=oEvent.clientY+'px';
            }
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

 3.鼠标移入移出实现图片的颜色淡入淡出

<!DOCTYPE html>
<html>
<head>
    <title>Fade In</title>
</head>
<style type="text/css">
    #img1{filter:alpha(opacity:30);opacity: 0.3;}
</style>
<script type="text/javascript">
    window.onload=function(){
        var oImg=document.getElementById('img1');
        oImg.onmouseover=function(){
            starMove(100);
        }
        oImg.onmouseout=function(){
            starMove(30);
        }
    }
    var timer=null;
    var alpha=30;
    function starMove(iTarget){
        var oImg=document.getElementById('img1');
        clearInterval(timer);
        timer=setInterval(function(){
            if(alpha<iTarget){
                iSpeed=10;
            }else{
                iSpeed=-10;
            }
            if(alpha==iTarget){
                clearInterval(timer);
            }else{
                alpha+=iSpeed;
                oImg.style.filter='alpha(opacity:'+alpha+')';
                oImg.style.opacity=alpha/100;
            }
        },30)

    }
</script>
<body>
<img id="img1" src="images/1.jpg">
</body>
</html>

 

posted @ 2018-03-02 17:02  cheryshi  阅读(11017)  评论(2)  编辑  收藏  举报