js實(shí)現(xiàn)常見(jiàn)的工具條效果
實(shí)現(xiàn)功能如下:
1. 二維碼展示功能;
2. “回到頂部”功能。(選擇“全屏預(yù)覽”,滑動(dòng)滾動(dòng)條,查看回到頂部功能)
效果圖:
圖(1) 初始效果
圖(2) 鼠標(biāo)懸浮效果
實(shí)例代碼:
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>工具條</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"> body{ background-color:#69C; } .toolbar{ position:fixed; left:50%; bottom:5px; margin-left:-26px; } .toolbar-item{ position:relative; display:block; width:52px; height:52px; background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201703/01/160208u95waa2sfwt27hwh.png); background-repeat:no-repeat; margin-top:1px; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; -ms-transition:background-position 1s; -o-transition:background-position 1s; transition:background-position 1s; } .toolbar-item-wenxin{ background-position:0 -798px; } .toolbar-item-wenxin:hover{ background-position:0 -860px; } .toolbar-item-feedback{ background-position:0 -426px; } .toolbar-item-feedback:hover{ background-position:0 -488px; } .toolbar-item-app{ background-position:0 -550px; } .toolbar-item-app:hover{ background-position:0 -612px; } .toolbar-item-top{ background-position:0 -674px; } .toolbar-item-top:hover{ background-position:0 -736px; } .toolbar-layer{ position:absolute; right:46px; bottom:-10px; width:172px; background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201703/01/160208u95waa2sfwt27hwh.png); background-repeat:no-repeat; opacity:0; filter:alpha(opacity=0); -webkit-transform-origin:95% 95%; -moz-transition-origin:95% 95%; -ms-transition-origin:95% 95%; -o-transition-origin:95% 95%; transform-origin:95% 95%; -webkit-transition:scale(0.01); -moz-transition:scale(0.01); -ms-transition:scale(0.01); -o-transition:scale(0.01); transform:scale(0.01); -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; transition:all 1s; } .toolbar-item-wenxin .toolbar-layer{ height:212px; background-position:0 0; } .toolbar-item-app .toolbar-layer{ height:194px; background-position:0 -222px; } .toolbar-item:hover .toolbar-layer{ opacity:1; filter:alpha(opacity=100); -webkit-transition:scale(1); -moz-transition:scale(1); -ms-transition:scale(1); -o-transition:scale(1); transform:scale(1); } </style> <script type="text/javascript"> $(window).on('load',function(){ $('#backTop').on('click',go); $(window).on('scroll',function(){ checkPosition($(window).height()); }); checkPosition($(window).height());//防止剛開(kāi)始刷新頁(yè)面,返回頂部沒(méi)有隱藏的問(wèn)題,先讓它執(zhí)行一次,使其fadeOut }) //到達(dá)頂部 function go(){ $('html,body').scrollTop(0); } //檢測(cè)位置 function checkPosition(pos){ if($(window).scrollTop() > pos){ $('#backTop').fadeIn();//滾動(dòng)超過(guò)一個(gè)屏的寬度,就顯示 }else{ $('#backTop').fadeOut(); } } </script> </head> <body> <div class="toolbar"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-wenxin"> <span class="toolbar-layer"></span> </a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-feedback"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-app"> <span class="toolbar-layer"></span> </a> <a id="backTop" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="toolbar-item toolbar-item-top"> </a> </div> <!--出現(xiàn)滾動(dòng)條--> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
使用JavaScript實(shí)現(xiàn)檢測(cè)網(wǎng)頁(yè)是否為空閑狀態(tài)
最近開(kāi)發(fā)項(xiàng)目時(shí),常碰到“用戶在一定時(shí)間內(nèi)無(wú)任何操作時(shí),跳轉(zhuǎn)到某個(gè)頁(yè)面”的需求,所以本文就來(lái)使用JavaScript實(shí)現(xiàn)這一要求,需要的可以參考下2024-03-03js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中(場(chǎng)景分析)
這篇文章主要介紹了js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中,本文通過(guò)場(chǎng)景分析給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-08-08JS 截取字符串substr 和 substring方法的區(qū)別
JS 截取字符串substr 和 substring方法的區(qū)別,需要的朋友可以參考下,根據(jù)需要自行選擇。2009-10-10javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明,每種編程語(yǔ)言必不可少的語(yǔ)法,在javascript中,變量的聲明相對(duì)其他語(yǔ)言來(lái)說(shuō),算是比較簡(jiǎn)單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06JS回調(diào)函數(shù)基本定義與用法實(shí)例分析
這篇文章主要介紹了JS回調(diào)函數(shù)基本定義與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)基本概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05