WEB中如何实现页面右侧浮动固定层返回顶部按钮带二维码展示功能-创新互联

这篇文章将为大家详细讲解有关WEB中如何实现页面右侧浮动固定层返回顶部按钮带二维码展示功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专业为企业提供那坡网站建设、那坡做网站、那坡网站设计、那坡网站制作等企业网站建设、网页设计与制作、那坡企业网站模板建站服务,10年那坡做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
HTML

首先我们准备右侧浮动层的内容,工具条有上下箭头按钮,然后一个“反馈”链接,点击可以到网站的反馈信息页面,还有一个二维码按钮,鼠标滑上时会弹出一个二维码图片,那么我们使用.popPanel来放置二维码图片,.arrowPanel是用来做箭头方向的。在本例中,我使用了一张背景图作为工具条,当然实际应用中我们还可以根据实际需求加多个功能按钮。

#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库文件。

当点击向上箭头.arrow时,设置动画,页面滚动到页头,当点击向下箭头.arrow时,页面滚动到页底,当中使用了scrollTop,当scrollTop的值为0时表示到页头,为页面总高度时则表示到页底。然后当鼠标滑上移动终端图标时,会向左弹出一个二维码图案,也是使用动画函数animate()设置宽度变化达到弹出展示效果,请看详细代码:

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

关于“WEB中如何实现页面右侧浮动固定层返回顶部按钮带二维码展示功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站名称:WEB中如何实现页面右侧浮动固定层返回顶部按钮带二维码展示功能-创新互联
转载来于:http://myzitong.com/article/dshics.html