jsは背景アニメーションの分割を実装します-jsチュートリアル-php.cn

jsは背景アニメーションの分割を実装します

韦小宝

リリース： 2017-11-20 10:11:23

オリジナル

2167 人が閲覧しました

js は背景アニメーションの分割を実現し、ソースコードを無料で提供します。興味のある友人は、js の知識を高めるために直接学習できます。js に関するソースコードやチュートリアルについては、PHP 中国語 Web サイトにアクセスしてください。自分自身 ~~

jsは背景アニメーションの分割を実装します

コード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
    <style>
        .container{
            margin: 100px auto;
            width: 500px;
            height: 500px;
            line-height: 0;
            font-size: 0;
        }
        .container p{
            width: 100px;
            height: 100px;
            background-image: url("http://www.php.cn/tpl/Index/Static/img/banner4.jpg");
            /*background-repeat: no-repeat;*/
            display: inline-block;
            position: relative;
            top: 0;
            left: 0;
            transition: all 0.5s;
        }
        .container p:nth-of-type(3){

        }
    </style>
</head>
<body>
<p>
</p>
<script>

    var ps = [];
    var container = document.getElementsByClassName("container");


    for (var i = 0; i < 25; i ++) {
        var num = Math.floor(Math.random()*200 - 100);
        ps.push(document.createElement("p"));
        ps[i].style.top = num + "px";
        ps[i].style.left = num + "px";
        ps[i].style.backgroundPosition = -i%5*100 + "px " + -Math.floor(i/5)*100 + "px";
        console.log(ps[i].style.backgroundPosition);
        container[0].appendChild(ps[i]);
    }

    container[0].onmouseenter = function () {
        for (var i = 0; i < 25; i ++) {
            ps[i].style.top = 0 + "px";
            ps[i].style.left = 0 + "px";
        }
    };
    container[0].onmouseleave = function () {
        for (var i = 0; i < 25; i ++) {
            var num = Math.floor(Math.random()*200 - 100);
            ps[i].style.top = num + "px";
            ps[i].style.left = num + "px";
        }

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

ログイン後にコピー

上記はアニメーション分割のソースコードです。興味がある方は、より多くのソースコードとエキサイティングなチュートリアルについては、PHP を参照してください。中国語のウェブサイト~~

関連する推奨事項:

JS模倣チャットページ

ネイティブjsは移動可能なプロンプトdivボックスのソースコードを実装します

ネイティブjsはドロップダウンリストボックスを実装します

以上がjsは背景アニメーションの分割を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。