JavaScript定時器

時間 2021-08-13

標籤 javascript css html java markdown ide 函數字體動畫 code 欄目 JavaScript 简体版

原文原文鏈接

1.往復運動動畫javascript

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>motion</title>
<script type="text/javascript">css

window.onload = function(){
    var iLeft = 0;
    var iSpeed = 3;
    var oDiv = document.getElementById('Div1');
    /*clearInterval() 關閉*/
    var timer = setInterval(function(){           
        iLeft += iSpeed;
        oDiv.style.left = iLeft + 'px';

        if(iLeft>700){           /*右側判斷*/
            iSpeed = -3;
        }
        if(iLeft<0){             /*左側判斷*/
            iSpeed = 3;
        }
    },20)  /*setInterval(函數，完成時間)*/
}

</script>

.div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 100px 0;
    position: absolute;

}
body{
    margin: 0;
}
</style>

</head>java

<body>markdown

<div class="div1" id="Div1"></div>

</body>
</html>ide

2.無縫滾動函數

例子：小南子字體

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小南子</title>
<script type="text/javascript">動畫

window.onload = function(){
    var oDiv = document.getElementById('slide');   /*獲取塊元素*/
    var oBtn01 = document.getElementById('btn01');
    var oBtn02 = document.getElementById('btn02');

    var oUl = oDiv.getElementsByTagName('ul')[0];  /*獲取的是元素集，取第一個*/
    var iRan = 0;         /*位移初始值*/
    var iSpeed = -2;
    var iNowspeed = 0;   /*臨時存儲*/
    oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;    /*oUl.innerHTML是所有li，兩個相加，至關於圖片拼接*/
    function moving(){                              /*移動函數*/
        iRan += iSpeed;                                 /*位移量*/
        if(iRan<-2060){                             /*五個li移出*/
            iRan = 0;                               /*回到初值，速度快，肉眼看不出*/
        }
        if(iRan>0){                                 /*當第一張圖片往右，當即拉到第二段圖片的第一張*/
            iRan = -2060;
        }
        oUl.style.left = iRan + 'px';               /*position的left*/
    }
    var timer = setInterval(moving,20);             /*定時器*/

    oBtn01.onclick = function(){                     /*點擊控制方向*/
        iSpeed = -2;
    }
    oBtn02.onclick = function(){
        iSpeed = 2;
    }
    oDiv.onmouseover = function(){                  /*鼠標移進*/
        iNowspeed = iSpeed;
        iSpeed = 0;                                 /*中止*/
    }
    oDiv.onmouseout = function(){                   /*鼠標移出*/
        iSpeed = iNowspeed;                         /*恢復上次移動*/
    }

}
</script>

<style type="text/css">code

*{                                                  /*把li的padding和margin消除*/
    margin: 0;
    padding: 0;
}
.list_con{
    width: 1236px;                                  /*3張圖片可視*/
    height: 526px;                                  /*圖片高度*/
    overflow: hidden;                               /*隱藏溢出*/
    border: 1px solid #000;                         /*邊框*/
    margin: 10px auto 0;                            /*相對body*/
    position: relative;                             /*父級position，relative*/
    background-color: #F0F0F0;                      /*背景色*/
}
.list_con ul{
    width: 3296px;                                  /*8張圖片寬度，過小會致使拼接出錯*/
    height: 506px;
    list-style: none;                                /*除去li樣式*/
    position: absolute;                             /*相對list_con*/
    left: 0;                                        /*初始位置*/
    top: 0;
}
.list_con ul li{
    float: left;                                    /*向左靠齊*/
    width: 392px;                                   /*一張圖片寬度*/
    height: 506px; 
    margin: 10px;                                    /*圖片間的距離*/
    /*position: absolute;*/
}
.btn_con{
    width: 1456px;                                   /*兩個按鈕的所在的範圍*/
    height: 50px;
    margin: 230px auto 0;                            /*按鈕位置*/
    position: absolute;                              
    float: left;
}
.btn_con .left,.right{
    width: 50px;                                    /*按鈕大小*/
    height: 50px;
    background-color: gold;                         /*背景色*/
    position: absolute;                          
    /*left: 0px;
    top: 0px;*/
    font-size: 50px;                                /*<>的大小*/
    border-radius: 25px;                            /*圓角*/
    line-height: 50px;                              /*垂直居中*/
    font-family: 'Arial';                           /*字體*/
    text-align: center;                             /*水平居中*/
    cursor: pointer;   /*鼠標光標，移到按鈕會變成小手，像接觸連接同樣*/
    opacity: 0.5;     /*透明度*/
}
.right{
    left: 1305px;     /*按鈕位置*/
}
.left{
    left: 10px;
}
</style>

</head>

<body>

<div class="btn_con" id="btn">
        <div class="left" id="btn01"><</div>  
        <div class="right" id="btn02">></div>  
</div>
<div class="list_con" id="slide">
    <ul>
        <li><a rel="nofollow" href="#"><img src="images/小林子1.jpg" alt="nanzi"></a></li>
        <li><a rel="nofollow" href="#"><img src="images/小林子2.png" alt="nanzi"></a></li>
        <li><a rel="nofollow" href="#"><img src="images/小林子3.png" alt="nanzi"></a></li>
        <li><a rel="nofollow" href="#"><img src="images/小林子4.png" alt="nanzi"></a></li>
        <li><a rel="nofollow" href="#"><img src="images/小林子5.png" alt="nanzi"></a></li>
    </ul>
</div>