扒皮下音悦台的“返回顶部”图标效果
昨晚想仿造下音悅臺(tái)首頁(yè)“返回頂部”的小超人效果，覺(jué)得這東西的實(shí)現(xiàn)很簡(jiǎn)單，應(yīng)該不會(huì)費(fèi)時(shí)超過(guò)一個(gè)鐘。結(jié)果擼代碼的過(guò)程發(fā)現(xiàn)存在很多意想不到的問(wèn)題。
先發(fā)個(gè)圖：
有興趣的朋友可以去音悅臺(tái)點(diǎn)一下這個(gè)小超人圖標(biāo)試一試，默認(rèn)是隱藏的，滾動(dòng)條下拉一小段距離后會(huì)從下面飛上來(lái)懸停在右下角，點(diǎn)擊的時(shí)候不但瀏覽器滾動(dòng)條會(huì)返回頂端，小超人也會(huì)往上飛到頂部消失掉。
不過(guò)我印象中，以前若鼠標(biāo)移到圖標(biāo)上，小超人會(huì)變成一個(gè)動(dòng)態(tài)（小超人的披風(fēng)會(huì)擺動(dòng)）的gif圖，不過(guò)現(xiàn)在取消了這效果，可能是因?yàn)間if畢竟不是png，多少帶有些鋸齒影響了美觀。
繼續(xù)到咱“理思路”時(shí)間，我們要實(shí)現(xiàn)的效果如下圖所示，即開(kāi)始和結(jié)束狀態(tài)，懸浮圖標(biāo)都是位于窗口下方看不到的地方，當(dāng)瀏覽器滾動(dòng)條被拉動(dòng)一小段距離（假設(shè)250px）后，圖標(biāo)從下向上移動(dòng)到某個(gè)看得到的位置（假設(shè)距離瀏覽器底部50px）并一直懸浮于此，只有點(diǎn)擊后觸發(fā)瀏覽器滾動(dòng)條置頂，并讓自己垂直飛到頂端消失（消失后重回底部看不到的位置）：
?
先寫(xiě)下原型：
<head> <style> .long{width:100%; height:1000px;} .long2{width:100%; height:900px;background-color:yellow;} a{display:block; position:fixed; z-index:50px; right:10px; width:30px; height:30px; background-color:green;} </style> <script src="jq.js"></script> <meta charset="utf-8"> <title>無(wú)標(biāo)題文檔</title> </head><body><a href="javascript:void(0);"></a><!--返回頂部的懸浮圖標(biāo)--><div class="long">占位符啊占位符</div><div class="long2">依舊是占位符啊占位符。。。</div></body> View Code初步腳本：
var $toTop = $("a"), $win=$(window);var a_h = $toTop.height();var a_btm = 150; //懸浮距離var act_h = 250; //觸發(fā)圖標(biāo)出現(xiàn)的下拉框下拉距離$toTop.css("bottom",-a_h); //默認(rèn)圖標(biāo)位于看不到的窗口下方var f1 = function(){$toTop.css({"bottom" : -a_h});}var f2 = function(){$toTop.animate({"bottom":a_btm},400,function(){$toTop.css({"bottom":a_btm}); //圖標(biāo)從下飛上來(lái)后固定住位置不變if($win.scrollTop()<act_h) f1(); //處理“圖標(biāo)飛動(dòng)過(guò)程用戶又將下拉框拉到上面”的事件 });}////滾動(dòng)條滾動(dòng)事件scrollFun = function(){if($win.scrollTop()<act_h) f1();else f2();}$win.on("scroll resize",scrollFun);$toTop.click(function(){$toTop.stop().animate({bottom:$win.height()},500); //圖標(biāo)飛到上面消失掉$('body,html').stop().animate({scrollTop:0},500); //下拉框返回頂部})其中f1對(duì)應(yīng) “初始化時(shí)，圖標(biāo)位于下面看不到的狀態(tài)”；
f2對(duì)應(yīng) “下拉框拖動(dòng)到某個(gè)距離（本例為250px）時(shí)，圖標(biāo)從下面飛上來(lái)的狀態(tài)，并一直處于懸浮位置的狀態(tài)”；
注意這里f2使用了animate的callback，要求圖標(biāo)飛上來(lái)后才修改其bottom值，避免覆蓋了動(dòng)畫(huà)效果。
另外這里需要考慮避免f2重復(fù)執(zhí)行的情況，畢竟拖動(dòng)下拉框的時(shí)候是不斷地在觸發(fā)窗體scroll事件，會(huì)導(dǎo)致f2的動(dòng)畫(huà)不斷進(jìn)入圖標(biāo)的動(dòng)作隊(duì)列。當(dāng)然有同學(xué)會(huì)考慮用stop()解決，但那樣會(huì)導(dǎo)致卡頓的情況，無(wú)法實(shí)現(xiàn)音悅臺(tái)那樣流暢的效果。
所以咱們只要讓f2只執(zhí)行一次即可，當(dāng)下拉框拉回頂部的時(shí)候則重置其可執(zhí)行狀態(tài)，可以利用標(biāo)志位實(shí)現(xiàn)，腳本修改為：
var flag = !0; //新增標(biāo)志位var $toTop = $("a"), $win=$(window);var a_h = $toTop.height();var a_btm = 150; var act_h = 250; $toTop.css("bottom",-a_h); var f1 = function(){$toTop.css({"bottom" : -a_h});flag = !0; //重置標(biāo)志位 }var f2 = function(){flag = !1; //修改標(biāo)志位，避免f2重復(fù)執(zhí)行$toTop.animate({"bottom":a_btm},400,function(){$toTop.css({"bottom":a_btm});if($win.scrollTop()<act_h) f1();});}////滾動(dòng)條滾動(dòng)事件scrollFun = function(){if($win.scrollTop()<act_h) f1();else if(flag) f2(); //標(biāo)志位為true才可執(zhí)行 }$win.on("scroll resize",scrollFun);$toTop.click(function(){$toTop.stop().animate({bottom:$win.height()},500); $('body,html').stop().animate({scrollTop:0},500); })可見(jiàn)這里定義了個(gè)標(biāo)志位flag，初始化狀態(tài)為true，且只有true的情況下f2才能執(zhí)行，但f2執(zhí)行時(shí)也順便把flag改為fail狀態(tài)（f1執(zhí)行時(shí)會(huì)重置為true）。
另外這段代碼依舊有問(wèn)題，因?yàn)楫?dāng)用戶點(diǎn)擊圖標(biāo)之后，觸發(fā)下拉框滾到頂部的過(guò)程中，也在不斷地觸發(fā)scrollFun事件，會(huì)導(dǎo)致圖標(biāo)還沒(méi)來(lái)得及飛到上面消失掉時(shí)，就觸發(fā)了f1，從而導(dǎo)致圖標(biāo)只飛了一小段距離就消失不見(jiàn)。
解決方法其實(shí)很簡(jiǎn)單，在用戶點(diǎn)擊圖標(biāo)時(shí)，通過(guò).off()解除圖標(biāo)對(duì)scrollFun事件的綁定即可，然后在圖標(biāo)飛到上方消失了的動(dòng)畫(huà)完成后，再重新綁定即可。最終代碼如下
var flag = !0;var $toTop = $("a"), $win=$(window);var a_h = $toTop.height();var a_btm = 150; var act_h = 250; $toTop.css("bottom",-a_h); var f1 = function(){$toTop.css({"bottom" : -a_h});flag = !0;}var f2 = function(){$win.off("scroll resize",scrollFun);$toTop.animate({"bottom":a_btm},400,function(){flag = !1;$toTop.css({"bottom":a_btm});$win.on("scroll resize",scrollFun);if($win.scrollTop()<act_h) f1();});}////滾動(dòng)條滾動(dòng)事件scrollFun = function(){if($win.scrollTop()<act_h) f1();else if(flag) f2();}$win.on("scroll resize",scrollFun);$toTop.click(function(){$win.off("scroll resize",scrollFun); //解綁scrollFun$toTop.stop().animate({bottom:$win.height()},500,function(){$win.on("scroll resize",scrollFun); //重綁scrollFun });$('body,html').stop().animate({scrollTop:0},500);})
最后弱弱地說(shuō)下，鑒于蘋(píng)果移動(dòng)設(shè)備（ios5及更舊版本）對(duì)fixed的支持不理想，如果是做wap站點(diǎn)則建議將定位更換為absolute并通過(guò)修改top值來(lái)實(shí)現(xiàn)圖標(biāo)動(dòng)畫(huà)效果，或者直接使用iscroll.js來(lái)實(shí)現(xiàn)。
共勉~
轉(zhuǎn)載于:https://www.cnblogs.com/vajoy/p/3852246.html
總結(jié)
以上是生活随笔為你收集整理的扒皮下音悦台的“返回顶部”图标效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 设计一个个人纳税计算程序
- 下一篇： JAVA学习数据库2