欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

页面右侧浮动牢靠层返回顶部按钮带二维码展示成果

发布时间:2016-11-27  编辑:杨雨个人博客网站   点击:   

移动互联网期间的到来,各人可以通过“扫一扫”成果轻松在移动端获取必要的信息。本日我给各人分享一个WEB成果,它是一个漂流在网页的右侧的小器材条,我们可以行使它上下快速定位页面位置,可以弹出微信二维码可能页面地点二维码,让喜畛刳手机等移动装备上阅读的伴侣轻松获守信息。

HTML

起首我们筹备右侧浮动层的内容,器材条有上下箭头按钮,然后一个“反馈”链接,点击可以到网站的反馈信息页面,尚有一个二维码按钮,鼠标滑上时会弹出一个二维码图片,那么我们行使.popPanel来安排二维码图片,.arrowPanel是用来做箭头偏向的。在本例中,我行使了一张配景图作为器材条,虽然现实应用中我们还可以按照现实需求加多个成果按钮。

<div id="floatPanel">
	<div class="ctrolPanel" style="right:20px;">
		<a class="arrow" href="#"><span>顶部</span></a>
		<a class="contact" href="http://www.helloweba.com/gbook.Html" target="_blank"><span>反馈</span></a>
		<a class="qrcode" href="#"><span>二维码</span></a>
		<a class="arrow" href="#"><span>底部</span></a>
	</div>
	
	<div class="popPanel" style="right:66px;">
		<div class="popPanel-inner">
			<div class="qrcodePanel"><img src="helloweba.jpg" /><p>扫描二维码用手机看文章</p></div>
			<div class="arrowPanel">
				<div class="arrow01"></div>
				<div class="arrow02"></div>
			</div>
		</div>
	</div>
</div>

CSS

我们行使CSS来将器材条牢靠在右侧,position:fixed在这里施展浸染,还要留意行使z-index的值要大点,由于我们但愿器材条一向能在页面其他元素的上层,也就是可以包围其他元素。详细请看以下代码:

#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>

当点击向上箭头.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);
	});
	
});
本文地址:http://itbyc.com/web/javascript/13526.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1