小球跟随鼠标移动效果

最新推荐文章于 2023-12-02 14:54:13 发布

sense26楠

最新推荐文章于 2023-12-02 14:54:13 发布

阅读量881

点赞数

分类专栏： javaScript css 文章标签：鼠标移动

本文链接：https://blog.csdn.net/qq_27610601/article/details/78730398

版权

javaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #list li {
            /*width: 30px;*/
            /*height: 30px;*/
            list-style: none;
            /*border-radius: 50%;*/
            /*background: deeppink;*/
            position: absolute;
        }
        div{
            width: 50px;
            height: 50px;
            border-radius: 60%;
            text-align: center;
            /*padding-top: 6px;*/


        }
        .xin{
            /*margin-top:200px;*/
            /*margin-left: 300px;*/
            /*background: url("aa.jpg") -200px -300px no-repeat;*/
            /*position: relative;*/
            /*z-index: 200;*/
            transform: scale(0.1);
            border: 1px solid red;
        }


        span{
            display: block;
            padding-top: 15px;
        }
        .hua{
            background: #ff1493;
            height: 80px;
            position: absolute;
            transition: all 2s ease;
            /*opacity: 0;*/
            z-index: -1;
        }
        .hua1{
            /*background: url("bb.jpg") -500px -500px no-repeat;*/
        }
        .hua1 img{
            width: 60px;
            height: 60px;
            display: block;
            border-radius: 50%;


        }
        .hua2{
            top: -70px;
        }
        .hua3{
            top: -50px;
            right: -40px;
            transform: rotate(50deg);
        }
        .hua4{
            top: -50px;
            left: -40px;
            transform: rotate(-50deg);
        }
        .hua5{
            top: 10px;
            left: -40px;
            transform: rotate(50deg);
        }
        .hua6{
            top: 10px;
            right: -40px;
            transform: rotate(-50deg);
        }
        .hua7{


            top: 30px;
        }
        .jing{
            height: 300px;
            width: 20px;
            background: #39f409;
            left: 15px;
            position: relative;
            z-index: -2;
            /*opacity: 0;*/
        }
        .ye1{
            width: 30px;
            height: 150px;
            background: green;
            position: relative;
            top: -280px;
            left: -50px;
            transform: rotate(-50deg);
            z-index: -4;
            /*opacity: 0;*/
        }
        .ye2{
            width: 30px;
            height: 150px;
            background: green;
            position: relative;
            top: -380px;
            right: -70px;
            transform: rotate(50deg);
            z-index: -4;
            /*opacity: 0;*/
        }
    </style>
</head>
<body>
<ul id="list">
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>


</ul>
<script>
    var list = document.getElementById('list');
    var lis = list.getElementsByTagName('li');
    document.documentElement.onmousemove = function (event) {
        var e = event || window.event;
        var x = e.clientX;
        var y = e.clientY;
        var m = 0;
        var timer = setInterval(function () {
                lis[m].style.left = x + 'px';
                lis[m].style.top = y + 'px';
                m = m+1;
                if(m>=lis.length){
                    clearTimeout(timer);
                    m = 0;
                }
            }, 50);
    }


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