js定時器+簡單的動畫效果實例

來源：九壹網(wǎng)

1.向下滑動

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>向下滑動</title>
 <style>
 body {
 margin: 0px;
 }
 #show {
 width: 200px;
 /* 高度為 0 */
 height: 100px;
 background-color: lightcoral;
 margin: 0 auto;
 /* 設(shè)置為隱藏 */
 /*display: none;*/
 }

 </style>
</head>
<body>
<div id="show"></div>
<script>
 var show = document.getElementById('show');
 /*show.style.display = 'block';

 var t = setInterval(function(){
 var style = window.getComputedStyle(show,null);
 var height = parseInt(style.height);
 // 判斷當前的高度是否為 400
 if (height >= 400){
 clearInterval(t);
 } else {
 height++;
 show.style.height = height + 'px';
 }
 },50);*/

 slideDown(show,400);

 /*
 將上述實現(xiàn)的向下滑動效果，封裝在一個固定的函數(shù)中
 * 設(shè)計當前實現(xiàn)向下滑動效果函數(shù)的形參
 * elem - 表示實現(xiàn)向下滑動效果的元素
 * maxHeight - 表示元素向下滑動的最大高度值
 * 函數(shù)的邏輯與默認設(shè)置CSS樣式屬性的值無關(guān)
 */
 function slideDown(elem, maxHeight){
 // 操作的元素默認的display值為none
 elem.style.display = 'block';
 elem.style.height = '0px';

 var t = setInterval(function(){
 var style = window.getComputedStyle(elem,null);
 var height = parseInt(style.height);
 // 判斷當前的高度是否為 400
 if (height >= maxHeight){
 clearInterval(t);
 } else {
 height++;
 elem.style.height = height + 'px';
 }
 },50);
 }


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

2.移動效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>移動效果</title>
 <style>
 body {
 margin: 0px;
 }
 #box {
 width: 100px;
 height: 100px;
 background-color: lightcoral;

 position: absolute;
 left: 100px;
 top: 100px;
 }
 </style>
</head>
<body>
<div id="box"></div>
<script>
 var box = document.getElementById('box');
 box.onclick = function(){
 clearInterval(t);
 }
 /*
 * 向右移動
 * 當前元素移動到頁面的最右邊時 -> 向左移動
 * 向左移動
 * 當前元素移動到頁面的最左邊時 -> 向右移動
 */
 var flag = false;// 默認表示向右
 var speed = 1;// 表示每次變化的值
 t = setInterval(function(){
 //speed += 0.01;
 // 獲取當前頁面的寬度
 var WIDTH = window.innerWidth;
 var style = window.getComputedStyle(box,null);
 var left = parseInt(style.left);
 var width = parseInt(style.width);
 // 判斷當前元素移動的方向
 if (flag){// 向左移動
 left -= speed;
 } else {// 向右移動
 left += speed;
 }
 // 判斷什么情況下，向左移動；判斷什么情況下，向右移動
 if ((left + width) >= WIDTH){// 向左移動
 flag = true;
 } else if (left <= 0){// 向右移動
 flag = false;
 }
 box.style.left = left + 'px';
 },10);

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

3.事件與動畫結(jié)合

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>事件與動畫結(jié)合</title>
 <style>
 body {
 margin: 0px;
 }
 </style>
</head>
<body>
<script>
 // 獲取<body>元素
 var body = document.body;
 // 當頁面加載完畢后，設(shè)置當前<body>元素的高度為當前瀏覽器窗口的高度
 window.onload = function(){
 setHeight(body);
 };
 // 當用戶改變?yōu)g覽器窗口的大小時，重新設(shè)置<body>元素的高度(等于當前窗口的高度)
 window.onresize = function(){
 setHeight(body);
 };
 // 定義函數(shù) - 設(shè)置<body>元素的高度等于當前窗口的高度
 function setHeight(elem){
 elem.style.height = window.innerHeight + 'px';
 }

 var width = 100,height = 100;
 // 為<body>元素綁定click事件
 body.onclick = function(event){
 var x = event.clientX;
 var y = event.clientY;
 // 創(chuàng)建<div>元素，顯示的位置在鼠標當前的坐標值
 var div = document.createElement('div');
 div.setAttribute('class','circle');
 body.appendChild(div);
 // rgb(0,0,0)格式 -> 顏色隨機
 var r = parseInt(Math.random()*255);
 var g = parseInt(Math.random()*255);
 var b = parseInt(Math.random()*255);

 div.style.width = width + 'px';
 div.style.height = height + 'px';
 div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
 div.style.borderRadius = '50%';
 div.style.opacity = 1;
 div.style.position = 'absolute';
 div.style.left = x - width/2 + 'px';
 div.style.top = y - height/2 + 'px';

 animate(div);
 }
 // 定義函數(shù) -> 實現(xiàn)動畫效果
 function animate(elem){
 var style = window.getComputedStyle(elem,null);
 /*var width = parseInt(style.width);
 var height = parseInt(style.height);
 var left = parseInt(style.left);
 var top = parseInt(style.top);
 width++;
 height++;
 elem.style.width = width + 'px';
 elem.style.height = height + 'px';
 elem.style.left = (left - 0.5) + 'px';
 elem.style.top = (top - 0.5) +'px';*/

 var opacity = style.opacity;

 if (opacity <= 0){
 clearTimeout(t);
 // 刪除當前元素
 }

 opacity -= 0.01;
 elem.style.opacity = opacity;

 // 設(shè)定定時器
 var t = setTimeout(function(){
 animate(elem);
 },50);
 }

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

以上這篇js定時器+簡單的動畫效果實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

js定時器+簡單的動畫效果實例