javascript 勻速運(yùn)動實(shí)現(xiàn)側(cè)邊欄分享效果

wind3110991 發(fā)布于2019-08-23 11:34 / 2939人閱讀

摘要：原理采用對象距離左邊的距離加固定速度。實(shí)現(xiàn)側(cè)邊欄分享效果用運(yùn)動做一個側(cè)邊欄分享分享到當(dāng)我們寫好一段代碼的時候，我們應(yīng)該進(jìn)行測試優(yōu)化。實(shí)現(xiàn)側(cè)邊欄分享效果簡化速度參數(shù)用運(yùn)動做一個側(cè)邊欄分享分享到

原理

采用offsetLeft（對象距離左邊的距離）加固定速度。

采用定時器setInterval和clearInterval

根據(jù)當(dāng)前位置到目標(biāo)位置是正值還是負(fù)值決定運(yùn)行的速度為正值還是負(fù)值。

實(shí)現(xiàn)側(cè)邊欄分享效果



  
    用運(yùn)動做一個側(cè)邊欄分享
    
    
  
  
    
      分享到

當(dāng)我們寫好一段代碼的時候，我們應(yīng)該進(jìn)行測試優(yōu)化。測試無兼容問題，封裝后的移動函數(shù)有兩個參數(shù)，這個時候，我們考慮參數(shù)是否可以簡化。
比如我們打出租車，我們可以告訴司機(jī)目的地，但是我們不必告訴司機(jī)以多少速度到目的地，所以，我們可以簡化參數(shù)為一個參數(shù)。具體代碼如下。

實(shí)現(xiàn)側(cè)邊欄分享效果——簡化速度參數(shù)



  
    用運(yùn)動做一個側(cè)邊欄分享
    
    
  
  
    
      分享到

GPU云服務(wù)器云服務(wù)器動態(tài)側(cè)邊欄顯示隱藏側(cè)邊欄 html側(cè)邊欄 jquery側(cè)邊欄

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97140.html

相關(guān)文章

[ 好文分享 ] CSS布局終極方案之--圣杯布局（兼容IE6+，現(xiàn)代瀏覽器）

摘要：圣杯布局很好很巧妙的布局方式，每次都要翻看一下，干脆轉(zhuǎn)過來轉(zhuǎn)自最終效果左側(cè)欄固定寬度，右側(cè)自適應(yīng)主內(nèi)容欄自適應(yīng)寬度側(cè)邊欄固定寬度右側(cè)欄固定寬度，左側(cè)自適應(yīng)主內(nèi)容欄自適應(yīng)寬度側(cè)邊欄固定寬度左中右三欄圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆轉(zhuǎn)過來轉(zhuǎn)自：http://my.oschina.net/jsan/blog/368543 最終效果： showImg(https:/...

qujian 2019-08-28 18:14 評論0 收藏0
Django搭建個人博客：回到頂部浮動按鈕、矢量圖標(biāo)、頁腳沉底和粘性側(cè)邊欄

摘要：本章集中介紹四個重要的小功能回到頂部浮動按鈕矢量圖標(biāo)頁腳沉底和粘性側(cè)邊欄。因?yàn)槲覀兿朐谌径紦碛羞@個按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。本章集中介紹四個重要的小功能：回到頂部浮動按鈕、矢量圖標(biāo)、頁腳沉底和粘性側(cè)邊欄。這幾個功能與Django基本沒啥關(guān)系，更多的是前端知識，但是對博客網(wǎng)站都很重要，問的讀者也比較多，因此也集中講一下好了。回到頂...

lovXin 2019-07-31 10:17 評論0 收藏0
JavaScript完美運(yùn)動框架的進(jìn)階之旅

摘要：運(yùn)動框架動起來進(jìn)行運(yùn)動的節(jié)點(diǎn)定時器你沒看錯，就是那么簡單。直接在定時器內(nèi)部，判斷到達(dá)目標(biāo)值，清除定時器就行拉運(yùn)動框架運(yùn)動終止進(jìn)行運(yùn)動的節(jié)點(diǎn)運(yùn)動終止條件。轉(zhuǎn)自個人博客三省吾身丶丶原來是JS動畫效果，但是我會過頭再看的時候，發(fā)現(xiàn)太粗略了，于是重新寫了一篇。喜歡別只收藏啊，點(diǎn)個推薦，大兄弟^ ^！運(yùn)動框架的實(shí)現(xiàn)思路運(yùn)動，其實(shí)就是在一段時間內(nèi)改變left、right、width、hei...

Pines_Cheng 2019-08-21 10:46 評論0 收藏0
從今天開始，拿起VuePress打造屬于自己的專屬博客

摘要：故九萬里，則風(fēng)斯在下矣，而后乃今培風(fēng)背負(fù)青天，而莫之夭閼者，而后乃今將圖南。這里是文件的內(nèi)容部分最后更新時間最后更新時間默認(rèn)不開啟，它是基于提交的時間戳，所以我們的靜態(tài)站點(diǎn)是需要通過的倉庫進(jìn)行管理的，并且它是按的時間來計(jì)算的。VuePress(0.x版本) 本blog配套了一個基于 VuePress 的一個簡單的配置案例，此配置案例包含了本blog絕大部分配置案例，更多詳情請移步這里VueP...

dantezhao 2019-05-22 17:59 評論0 收藏0
干貨--手把手?jǐn)]vue移動UI框架：側(cè)邊菜單

摘要：最后提醒下，代碼中使用而非的原因是為了啟動移動端手機(jī)的動畫加速，提升動畫流暢度。前言最近面試發(fā)現(xiàn)很多前端程序員都從來沒有寫過插件的經(jīng)驗(yàn)，基本上都是網(wǎng)上百度。所以打算寫一系列文章，手把手的教一些沒有寫過組件的兄弟們?nèi)绾稳懖寮?。本系列文章都基于VUE，核心內(nèi)容都一樣，會了之后大家可以快速的改寫成react、angular或者是小程序等組件。這篇文章是第一篇，寫的是一個類似QQ的側(cè)邊菜...

bergwhite 2019-08-22 15:11 評論0 收藏0