Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve the floating fixed layer on the right side of the page to return to the top button with QR code display function in WEB, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.

HTML

First of all, we prepare the content of the floating layer on the right, the toolbar has up and down arrow buttons, and then a "feedback" link, click to the site's feedback page, there is also a QR code button, when the mouse slips up will pop up a QR code picture, then we use .popPanel to place the QR code picture, .arrowPanel is used to do the arrow direction. In this case, I use a background image as a sidebar, and of course we can add multiple function buttons according to our actual needs.

# 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

This example is based on jQuery, so you must first load the jQuery library. You can use the front-end CDN of 360to load the jQuery library file.

When clicking the up arrow .arrow, set the animation, the page scrolls to the top of the page, when clicking the down arrow .arrow, the page scrolls to the bottom of the page, in which scrollTop is used, when the value of scrollTop is 0, it is indicated to the head of the page, and when it is the total height of the page, it is indicated to the bottom of the page. Then, when the mouse rolls over the mobile terminal icon, a QR code pattern pops up to the left. The width change is also set using the animation function animate () to achieve the pop-up display effect. Please see the detailed code:

(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);};})

On the "WEB how to achieve the right side of the page floating fixed layer back to the top button with QR code display function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.