web8(JavaScript動畫原理)

歌詞的無縫滾動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無縫滾動</title>
    <style>
        #box{
            width: 200px;
            height: 120px;
            margin: 100px auto;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
        }
        li{
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="content">
        <li>千錘萬鑿出深山</li>
        <li>烈火焚燒若等閒</li>
        <li>粉身碎骨全不怕</li>
        <li>要留清白在人間</li>
        <li>千錘萬鑿出深山</li>
        <li>烈火焚燒若等閒</li>
        <li>粉身碎骨全不怕</li>
        <li>要留清白在人間</li>
        <li>千錘萬鑿出深山</li>
        <li>烈火焚燒若等閒</li>
        <li>粉身碎骨全不怕</li>
        <li>要留清白在人間</li>
        <li>千錘萬鑿出深山</li>
        <li>烈火焚燒若等閒</li>
        <li>粉身碎骨全不怕</li>
        <li>要留清白在人間</li>
    </ul>
</div>
<script>
    var box = document.getElementById('box');
    var ul = document.getElementById('content');
    var n = 0;
    var key = true;
	//鼠標移入指定的區域內,歌詞暫停
    box.onmouseenter = function(){
        key = false;
    };
    //鼠標移出指定的區域內,歌詞繼續自動滑動
    box.onmouseleave = function(){
        key = true;
    };

    aa();
    function aa() {
        if(n<=-120){
            n=0;
        }
        if(key){
            n -= .2;
        }
        ul.style.top = n + 'px';
        setTimeout(aa,13);
    }



    // 週期執行函數,每13毫秒就執行一次doit
    // setInterval規定動畫的開始時間週期,而不是兩次動畫的間隔。
    // 如果動畫本身的執行時間超過13,動畫會出問題。
    // setInterval適合時鐘類的動畫
    // setInterval(doit,13)
    // var key = setInterval(doit,13);
    // clearInterval(key);

    // 延遲執行函數,等待13毫秒後執行一次doit。
    // setTimeout(doit,13)

    // 動畫的發動機
    // aa();
    // function aa() {
    //     //動畫的內容
    //     setTimeout(aa,13);
    // }


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

效果圖
在這裏插入圖片描述

2.圖片橫向輪播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片輪播</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid black;
            overflow: hidden;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            width: 9999px;
        }
        li{
            float: left;
        }
        img{
            width: 400px;
            height: 400px;
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="ul">
        <li><img src="images/a1.jpg"></li>
        <li><img src="images/a2.jpg"></li>
        <li><img src="images/a3.jpg"></li>
        <li><img src="images/a4.jpg"></li>
        <li><img src="images/a5.jpg"></li>
        <li><img src="images/a6.jpg"></li>

        <li><img src="images/a1.jpg"></li>
    </ul>
</div>
<script>
    var ul = document.getElementById('ul');
    var index=0;
    var n;

    aa();
    function aa() {
    	//用三角函數的速度進行切換圖片
        n = Math.PI/2;
        setTimeout(bb,5000);
    }
    function bb() {
        if(n > - Math.PI/2){
            n -= 0.1;
            ul.style.marginLeft = -400*index + (Math.sin(n)-1)*200 + 'px';
            setTimeout(bb,13);
        }else{
            index = ++index%6;
            ul.style.marginLeft = -400*index + 'px';
            aa();
        }
    }
</script>
</body>
</html>

效果如圖:
在這裏插入圖片描述

3.圖片淡化切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片輪播2</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 50px auto;
        }

    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById('box');
    var arrImg = [
        "images/a1.jpg",
        "images/a2.jpg",
        "images/a3.jpg",
        "images/a4.jpg",
        "images/a5.jpg",
        "images/a6.jpg"
    ];

    box.style.position = 'relative';
    var newImg = document.createElement('img');
    var oldImg = new Image();
    box.appendChild(newImg);
    box.appendChild(oldImg);

    newImg.style.position = 'absolute';
    newImg.style.left = '0px';
    newImg.style.top = '0px';
    newImg.style.zIndex = '1';
    //自適應
    newImg.style.width = box.clientWidth + 'px';
    newImg.style.height = box.clientHeight + 'px';

    oldImg.style.position = 'absolute';
    oldImg.style.left = '0px';
    oldImg.style.top = '0px';
    oldImg.style.zIndex = '2';
    //自適應
    oldImg.style.width = box.clientWidth + 'px';
    oldImg.style.height = box.clientHeight + 'px';

    var index = 0;
    var n;

    aa();
    function aa() {
       //重新設置多次循環前的透明度的值爲1.及不透明
        n = 1;
        //修正舊圖的透明度爲1
        oldImg.style.opacity = 1;
        //舊圖
        oldImg.src = arrImg[index];
        //索引值加一
        index = ++index % arrImg.length;
        //新圖
        newImg.src = arrImg[index];
        setTimeout(bb,5000);
    }
    function bb() {
        if(n > 0){
            n -= 0.01;
            //更改圖片的透明度
            oldImg.style.opacity = n;
            setTimeout(bb,13);
        }else{
            aa();
        }
    }

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

效果如圖;
在這裏插入圖片描述

4.圖片輪縮放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片輪播3</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 50px auto;
        }

    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById('box');
    var arrImg = [
        "images/a1.jpg",
        "images/a2.jpg",
        "images/a3.jpg",
        "images/a4.jpg",
        "images/a5.jpg",
        "images/a6.jpg"
    ];

    box.style.position = 'relative';
    var oldImg = new Image();

    box.appendChild(oldImg);

    oldImg.style.position = 'absolute';
    oldImg.style.left = '0px';
    oldImg.style.top = '0px';
    oldImg.style.zIndex = '2';
    oldImg.style.width = box.clientWidth + 'px';
    oldImg.style.height = box.clientHeight + 'px';

    var index = 0;
    var n;
    var key;

    aa();
    function aa() {
        n = 500;
        key = false;
        oldImg.style.width = '500px';
        oldImg.style.height = '500px';
        oldImg.style.left = '0px';
        oldImg.style.top = '0px';
        oldImg.src = arrImg[index];
        setTimeout(bb,5000);
    }
    function bb() {
        if(n > -500){
            n -= 20;
            oldImg.style.width = Math.abs(n) + 'px';
            oldImg.style.height = Math.abs(n) + 'px';
            oldImg.style.left = Math.abs(Math.abs(n)/2-250) + 'px';
            oldImg.style.top = Math.abs(Math.abs(n)/2-250) + 'px';
            if(n <= 0 && key == false){
                key = true;
                index = ++index%arrImg.length;
                oldImg.src = arrImg[index];
            }
            setTimeout(bb,13);
        }else{
            aa();
        }
    }
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章