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

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

时间:2018-03-02 18:36:59      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:java   top   str   多个   javascrip   post   name   null   elements   

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>

 

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

标签:java   top   str   多个   javascrip   post   name   null   elements   

原文地址:https://www.cnblogs.com/cheryshi/p/8494139.html

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