js簡單實現div寬度勻速增加/減小

本文轉載自查看原文 2016-02-16 00:15 2281 javascript

效果類似百度首頁音樂盒。

點擊音樂右邊的div可以變長或者變短。

代碼：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0
 10         }
 11         body{
 12             background: #121B18;
 13         }
 14         .txt{
 15             width: 50%;
 16             margin: 100px auto;
 17             position: relative;
 18         }
 19         .mask{
 20             width: 0px;
 21             height: 50px;
 22             overflow: hidden;
 23             position: absolute;
 24             left: 0;
 25             display: none;
 26             background: #5D6A5D;
 27             
 28         }
 29         .right{
 30             float: left;
 31             position: relative;
 32 
 33         }
 34         .gouzi{
 35             float: left;
 36             width: 30px;
 37             height: 50px;
 38             color: #fff;
 39             text-align: center;
 40             position: relative;
 41             background: #4F6151;
 42         }
 43         .yinyue{
 44             position: absolute;
 45             top: 11px;
 46             left: 0;
 47         }
 48         .content{
 49             color: #fff;
 50             width: 700px;
 51         }
 52         .clear{
 53             clear: both;
 54         }
 55     </style>
 56 </head>
 57 <body>
 58     <div class="txt" draggable="true">
 59         <div class="gouzi" id="holdTxt"><span class="yinyue">音樂</span></div><!--鈎子-->
 60         <div class="right">
 61             <div class="mask" id="mask"><!--遮罩層-->
 62                 <div class="content">我是內容</div>
 63             </div>
 64             <div class="clear"></div><!--清除浮動 -->
 65         </div>
 66     </div>
 67 </body>
 68     <script>
 69         var holdTxt = document.getElementById("holdTxt");
 70         var mask = document.getElementById("mask");
 71 
 72         function addW(iWidthMin,iWidthMax,iSpeed){//增加/減小寬度函數，iWidthMin為最小寬度，iWidthMax為最大寬度，iSpeed為速度
 73             mask.style.display="block";
 74             if(iSpeed>0){//判斷是增加寬度還是減小寬度
 75                 if(mask.offsetWidth<iWidthMax){//臨界值判斷
 76                     mask.style.width=mask.offsetWidth+iSpeed+"px";//offsetWidth:元素的寬度，邊框，內邊距，內容之和，不包括外邊距的。
 77                 }
 78             }else{
 79                 if(mask.offsetWidth>iWidthMin){
 80                     mask.style.width=mask.offsetWidth+iSpeed+"px";
 81                 }
 82             }
 83             
 84             
 85         }
 86         var timer=null;
 87         var flag=0;
 88         holdTxt.onclick=function(){
 89             clearInterval(timer);//清除上一次的定時器
 90             if(flag==0){//如果flag==0,執行增加寬度函數
 91                 timer = setInterval(function(){
 92                                 addW(0,700,10);
 93                             },20);
 94                 flag=1;//讓flag=1,下次點擊就執行減小寬度函數
 95                 
 96             }else if(flag==1){
 97                 timer = setInterval(function(){
 98                                 addW(0,400,-10);
 99                             },20);
100                 flag=0;
101                 
102             }
103             
104             
105         }
106     </script>
107 </html>

效果好丑（沒有加太多修飾）：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用 JS 實現拖拽拉伸一個 div 的寬度原生js用div實現簡單的輪播圖增加刪除DIV的JS寫法 js獲取頁面寬度給JS div設寬度 JS實現九宮格抽獎（一）-勻速版 js代碼簡單實現數字滾動增加動效（原） js scrollTop勻速滾動 js簡單動畫：勻速動畫、緩動動畫、多物體動畫以及透明度動畫 js簡單實現div里面的內容向上平滑滾動。 css實現左邊div固定寬度，右邊div自適應撐滿剩下的寬度