JS實(shí)現(xiàn)的簡單折疊展開動畫效果示例

發(fā)布時間：2020-09-27 19:18:07 來源：腳本之家閱讀：361 作者：愛吃番茄的西紅柿欄目：web開發(fā)

本文實(shí)例講述了JS實(shí)現(xiàn)的簡單折疊展開動畫效果。分享給大家供大家參考，具體如下：

<!DOCTYPE = html>
<html>
 <head>
  <title>www.jb51.net JS折疊展開動畫</title>
  <style>
  body{
   margin: 0px;
   padding: 0px;
  }
  .red{
   background-color:red;
   width:200px;
   height:200px;
   position:relative;
   left:-200px;
   top:0px;
  }
  .blue{
   background:blue;
   width:20px;
   height:50px;
   position:absolute;
   left:200px;
   top:75px;
  }
  </style>
 </head>
 <body>
  <div class="red" id="cf1"><div class="blue" id="cf">分享</div></div>
  <script>
  window.onload = function(){
   var onDiv = document.getElementById("cf1");
   onDiv.onmouseover = function(){
    startmove(0);
   }
   onDiv.onmouseout = function(){
    startmove(-200);
   }
  }
  var timer ;
  function startmove(target){
   clearInterval(timer);//清除定時器，以免多次觸發(fā)定時器導(dǎo)致速度越來越快而不是勻速前進(jìn)
   var onDiv1 = document.getElementById("cf1");
   timer = setInterval(function(){
   var speed = 0;
   if(onDiv1.offsetLeft<target){
    speed = 10;
   }else{
    speed = -10;
   }
   if(onDiv1.offsetLeft==target){
    clearInterval(timer);
   }
   else{
   onDiv1.style.left = onDiv1.offsetLeft+speed+'px';
   }
   },30)
  }
  </script>
 </body>
</html>

運(yùn)行效果：

小結(jié)：

一、css部分：

1、別忘記樣式初始化；
2、復(fù)習(xí)css文件的引用方式；（類引用方式）
3、復(fù)習(xí)絕對定位和相對定位關(guān)系（父關(guān)系用relative；子關(guān)系用absolute）

二、js部分：

1、element.style.left & element.offsetLeft區(qū)別：

① 前者單位是px，是字符串；后者單位是數(shù)值；
② 其他參見：https://www.jb51.net/article/43981.htm

2、思路開始不夠清晰，未能抽象出鼠標(biāo)放上和移開關(guān)鍵變量——目標(biāo)位置不同而已

3、函數(shù)參數(shù)盡可能少（在能達(dá)成目標(biāo)的情況下）

4、鼠標(biāo)作用對象設(shè)置為父級div最好，不然會出現(xiàn)閃爍情況（剛調(diào)用onmouseover，目標(biāo)移除，又調(diào)用了onmouseout）

5、注意清除定時器（①、防止移動時速度不穩(wěn)定 ②、到目標(biāo)位置停止運(yùn)動）

三、其他：

Q:谷歌瀏覽器解除禁止彈出窗口？

A:設(shè)置——高級設(shè)置——隱私設(shè)置——內(nèi)容設(shè)置——彈出式窗口，進(jìn)行相關(guān)設(shè)置。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

JS實(shí)現(xiàn)的簡單折疊展開動畫效果示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽