WEB中如何實現(xiàn)頁面右側(cè)浮動固定層返回頂部按鈕帶二維碼展示功能

這篇文章將為大家詳細講解有關(guān)WEB中如何實現(xiàn)頁面右側(cè)浮動固定層返回頂部按鈕帶二維碼展示功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

HTML

首先我們準(zhǔn)備右側(cè)浮動層的內(nèi)容，工具條有上下箭頭按鈕，然后一個“反饋”鏈接，點擊可以到網(wǎng)站的反饋信息頁面，還有一個二維碼按鈕，鼠標(biāo)滑上時會彈出一個二維碼圖片，那么我們使用.popPanel來放置二維碼圖片，.arrowPanel是用來做箭頭方向的。在本例中，我使用了一張背景圖作為工具條，當(dāng)然實際應(yīng)用中我們還可以根據(jù)實際需求加多個功能按鈕。

#floatPanel .ctrolPanel{width:36px;height:166px;background:#fff url(panel_bg.gif) no-repeat left top;border:solid 1px #ddd;position:fixed;right:25px;top:300px;overflow:hidden;z-index:10000;} #floatPanel .ctrolPanel a{width:34px;font-size:12px;color:#ff6600;letter-spacing:1px;text-align:center;overflow:hidden;} #floatPanel .ctrolPanel .arrow{height:29px;line-height:28px;display:block;margin:1px auto;} #floatPanel .ctrolPanel .arrow span{display:none;} #floatPanel .ctrolPanel .arrow:hover{background:#f4f4f4;} #floatPanel .ctrolPanel .arrow:hover span{display:block;} #floatPanel .ctrolPanel .contact{height:60px;display:block;margin:2px auto;} #floatPanel .ctrolPanel .contact span{line-height:90px;} #floatPanel .ctrolPanel .qrcode{height:40px;display:block;margin:2px auto;} #floatPanel .ctrolPanel .qrcode span{display:none;} .popPanel{width:205px;height:214px; position:fixed;right:90px;top:300px;z-index:10000;overflow:hidden;display:none; } .popPanel-inner{width:205px;height:220px;position:relative;overflow:hidden;} .arrowPanel{width:10px;height:210px;position:absolute;right:1px;top:102px;} .arrowPanel .arrow01{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #ddd;position:absolute;bottom:0;position:absolute;left:2px;top:0;} .arrowPanel .arrow02{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #fff;position:absolute;bottom:0;position:absolute;left:0;top:0;} .qrcodePanel{width:194px; height:212px; background:#fff;text-align:center;border:solid 1px #ddd;position:absolute;left:0;top:0;overflow:hidden;} .qrcodePanel img{width:174px;height:174px;border:none;padding:5px 5px 0px 5px;} .qrcodePanel p{font-size:12px;color:#666;line-height:20px;letter-spacing:1px;}

jQuery

本實例基于jQuery，因此必須先載入jQuery庫，你可以使用360的前端CDN加載jQuery庫文件。

<script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>

當(dāng)點擊向上箭頭.arrow時，設(shè)置動畫，頁面滾動到頁頭，當(dāng)點擊向下箭頭.arrow時，頁面滾動到頁底，當(dāng)中使用了scrollTop，當(dāng)scrollTop的值為0時表示到頁頭，為頁面總高度時則表示到頁底。然后當(dāng)鼠標(biāo)滑上移動終端圖標(biāo)時，會向左彈出一個二維碼圖案，也是使用動畫函數(shù)animate()設(shè)置寬度變化達到彈出展示效果，請看詳細代碼：

$(function(){ $("#floatPanel a.arrow").eq(0).click(function(){ $("html,body").animate({scrollTop :0}, 300); return false; }); $("#floatPanel a.arrow").eq(1).click(function(){ $("html,body").animate({scrollTop : $(document).height()}, 300); return false; }); var panel = $(".popPanel"); var w = panel.outerWidth(); $(".qrcode").hover(function(){ panel.css("width","0px").show(); panel.animate({"width" : w + "px"},300); },function(){ panel.animate({"width" : "0px"},300); }); });

關(guān)于“WEB中如何實現(xiàn)頁面右側(cè)浮動固定層返回頂部按鈕帶二維碼展示功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。