移動端影片
紅色勾勾代表強烈推薦
transition實作影片案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移動端影片</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;transition:transform 1s;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> var btn=document.getElementById("btn"), box=document.getElementById("box"), dest=window.innerWidth-100;//移動的距離 btn.addEventListener("click",function(){ box.style.transform="translate3d("+dest+"px,0,0)"; },false); </script> </body> </html>
也可以提取成函式的寫法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移動端影片</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;transition:transform 1s;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> var btn=document.getElementById("btn"), box=document.getElementById("box"), dest=window.innerWidth-100;//移動的距離 btn.addEventListener("click",function(){ move(box,dest); },false); function move(el,pos){ el.style.transform="translate3d("+pos+"px,0,0)"; } </script> </body> </html>
animation影片推薦一個animation庫，animation.js https://daneden.github.io/animate.css/
可以查看各種影片的樣式：
一般情況下推薦使用css3的transition和animation來完成影片，如果不能滿足需求，可以考慮js的requestAnimationFrame
不做css影片時，記得一定要去掉transition屬性
requestAnimationFrame的特點是：呼叫一次只執行一幀；如果想要持續執行，就需要遞回，<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移動端影片</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> //requestAnimationFrame的兼容性處理 var requestAnimationFrame=window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| window.msRequestAnimationFrame|| window.oRequestAnimationFrame|| function(fn){ setTimeout(fn,16); } var btn=document.getElementById("btn"), box=document.getElementById("box"), dest=window.innerWidth-100,//移動的距離 speed=1, pos=0; btn.addEventListener("click",function(){ requestAnimationFrame(step); },false); function move(el,pos){ el.style.transform="translate3d("+pos+"px,0,0)"; } function step(){ if(pos<dest){ //遞回 pos+=speed; move(box,pos); requestAnimationFrame(step); }else{ pos=dest; move(box,pos); } } </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60264.html
標籤：Html/Css