JS輪播圖中緩動(dòng)函數(shù)的封裝-創(chuàng)新互聯(lián)

輪播圖的根本其實(shí)就是緩動(dòng)函數(shù)的封裝，如果說(shuō)輪播圖是一輛跑動(dòng)的汽車(chē)，那么緩動(dòng)函數(shù)就是它的發(fā)動(dòng)機(jī)，今天本文章就帶大家由簡(jiǎn)入繁，封裝屬于自己的緩動(dòng)函數(shù)~~

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)梅州,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):13518219792

我們從需求的角度開(kāi)始，首先給出一個(gè)簡(jiǎn)單需求：

1、我想讓頁(yè)面中的一個(gè)盒子從開(kāi)始的位置勻速向右運(yùn)動(dòng)到200px的地方，該怎么實(shí)現(xiàn)？

分析：

1）我們需要知道盒子在哪個(gè)地方，這個(gè)可以通過(guò)offsetLeft屬性去獲??；

2）要讓盒子勻速運(yùn)動(dòng)，對(duì)于js肯定需要setInterval了；

3）要讓盒子向右邊跑起來(lái)？那就是需要不停改變盒子與左邊起始點(diǎn)的距離，有margin-left，還有定位的left，這里我選擇了改變絕對(duì)定位的left；

4）跑到離開(kāi)始點(diǎn)200px的距離我們要停下來(lái)，使用clearInterval就可以了。

接下來(lái)直接上代碼了　　

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   div {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
   }
   input {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: yellowgreen;
   }

  </style>
 </head>

 <body>
  <div></div>
  <input type="button" value="移動(dòng)到200" />


  <script type="text/javascript">
   // 獲取到元素（這里有個(gè)小細(xì)節(jié)，如果給元素設(shè)置了id名，即便不使用獲取元素的方法，也能通過(guò)這個(gè)id名獲取到元素哦~~大家可以自己嘗試一下）
   var btn = document.querySelector('input'),
     dv = document.querySelector('div');
   // 添加點(diǎn)擊事件
   btn.addEventListener('click',function() {
    var timer = null,// 保存定時(shí)器
      currentDistance = dv.offsetLeft, // 當(dāng)前離父盒子的距離
      step = 8,// 每次改變的距離
      target = 200;// 目標(biāo)距離
    timer = setInterval(function() {
     currentDistance += step;// 當(dāng)前距離 = 上一個(gè)當(dāng)前距離 + 改變的距離
     if((target - currentDistance) < step) { 
      currentDistance = target; // 如果目標(biāo)距離與當(dāng)前距離的差小于了要改變的距離，這時(shí)候我們就直接讓當(dāng)前距離等于目標(biāo)距離，防止盒子停下來(lái)的時(shí)候有誤差
      clearInterval(timer); // 清楚定時(shí)器
      timer = null; // 將timer解綁，釋放內(nèi)存
     }
     dv.style.left = currentDistance + 'px'; // 最核心的一步，改變盒子的left為當(dāng)前距離
    },17)
   })
  </script>
 </body>
</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)標(biāo)題：JS輪播圖中緩動(dòng)函數(shù)的封裝-創(chuàng)新互聯(lián)
分享鏈接：http://muchs.cn/article28/pcocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容