js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 返回顶部

jQuery实现带二维码的返回顶部特效

发布时间:2015-08-27 15:16:18    您是第0位浏览者

本js特效代码兼容:ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery实现带二维码的返回顶部特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery实现带二维码的返回顶部特效 - js特效代码</title>
<style>
	#elevator_item{width:60px;height:100px;position:fixed;right:15px;bottom:15px;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;-o-transition:opacity .4s ease-in-out;opacity:1;z-index:100020;display:none}
	#elevator_item.off{opacity:0;visibility:hidden}
	#elevator{display:block;width:60px;height:50px;background:url(img/icon_top.png) center center no-repeat;background-color:#444;background-color:rgba(0,0,0,.6);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;margin-bottom:10px}
	#elevator:hover{background-color:rgba(0,0,0,.7)}
	#elevator:active{background-color:rgba(0,0,0,.75)}
	#elevator_item .qr{display:block;width:60px;height:40px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;background:url(img/icon_code.png) center center no-repeat;background-color:#444;background-color:rgba(0,0,0,.6)}
	#elevator_item .qr:hover{background-color:rgba(0,0,0,.7)}
	#elevator_item .qr:active{background-color:rgba(0,0,0,.75)}
	#elevator_item .qr-popup{width:170px;height:200px;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.1);position:absolute;left:-180px;bottom:0;border-radius:2px;display:none;text-align:center}
	#elevator_item .qr-popup .code-link{display:block;margin:10px;color:#777}
	#elevator_item .qr-popup .code{display:block;margin-bottom:10px}
	#elevator_item .qr-popup .arr{width:6px;height:11px;background:url(img/code_arrow.png) 0 0 no-repeat;position:absolute;right:-6px;bottom:14px}
</style>
</head>
<body style="height:2000px; background:#CCCCCC">
	<h1 style="text-align:center;padding:20px;">滚动条下拉后看右下角查看效果!</h1>
		<div id="elevator_item">
			<a id="elevator" onclick="return false;" title="回到顶部"></a>
			<a class="qr"></a>
		<div class="qr-popup">
			<a class="code-link"><img class="code" src="img/wx.jpg"/></a>
			<span>加js代码为微信好友</span>
			<div class="arr"></div>
		</div>
	</div>
	<script src="js/jquery.min.js" type="text/javascript"></script> 
	<script type="text/javascript">
		$(function() {
			$(window).scroll(function(){
				var scrolltop=$(this).scrollTop();		
				if(scrolltop>=200){		
					$("#elevator_item").show();
				}else{
					$("#elevator_item").hide();
				}
			});		
			$("#elevator").click(function(){
				$("html,body").animate({scrollTop: 0}, 500);	
			});		
			$(".qr").hover(function(){
				$(".qr-popup").show();
			},function(){
				$(".qr-popup").hide();
			});	
		});
	</script>
</body>
</html>



返回顶部

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

Metro扁平风格网页右侧浮动返回顶部特效代码

jQuery实现右侧悬浮在线客服、返回顶部代码

jQuery实现带二维码的返回顶部特效

jQuery仿威锋商城右侧多功能返回顶部特效

jQuery实现火箭图标返回顶部特效

纯css实现QQ音乐返回顶部和返回底部的快捷导航代码

jquery win8扁平风格返回顶部和在线客服网站侧边栏代码

jquery实现图翼网侧边带二维码的返回顶部特效

jQuery实现网页滚动显示浮动导航,并且带返回顶部按钮

div+css实现网页右侧返回顶部样式特效

jquery实现带微信二维码的返回顶部特效代码

jquery css3带微信二维码返回顶部特效代码

友荐云推荐
大家说 此评论不代表本站观点