您的位置：首页 > 其它

小球跟随鼠标移动效果

2016-09-08 16:44 337 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航