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; /* 設置為隱藏 */ /*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); /* 將上述實現的向下滑動效果，封裝在一個固定的函數中 * 設計當前實現向下滑動效果函數的形參 * elem - 表示實現向下滑動效果的元素 * maxHeight - 表示元素向下滑動的最大高度值 * 函數的邏輯與默認設置CSS樣式屬性的值無關 */ 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.事件與動畫結合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件與動畫結合</title> <style> body { margin: 0px; } </style></head><body><script> // 獲取<body>元素 var body = document.body; // 當頁面加載完畢后，設置當前<body>元素的高度為當前瀏覽器窗口的高度 window.onload = function(){ setHeight(body); }; // 當用戶改變瀏覽器窗口的大小時，重新設置<body>元素的高度(等于當前窗口的高度) window.onresize = function(){ setHeight(body); }; // 定義函數 - 設置<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; // 創建<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); } // 定義函數 -> 實現動畫效果 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; // 設定定時器 var t = setTimeout(function(){ animate(elem); },50); }</script></body></html>以上這篇js定時器+簡單的動畫效果實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
