案例:jQuery 返回顶部(返回顶部、微信、评论、反馈)

老白 8个月前 343浏览 0评论

相关:《即插即用 返回顶部 javascript

案例:jQuery 返回顶部(返回顶部、微信、评论、反馈) js/jQuery 第1张案例:jQuery 返回顶部(返回顶部、微信、评论、反馈) js/jQuery 第2张

之前发布的即插即用返回顶部jQuery,今天再次分享一个案例,是一个集返回顶部、意见反馈、二维码弹出的代码。今天分享的案例也更符合zblog模板

<div class="bottom_tools">
  <div class="qr_tool">二维码</div>
  <a id="feedback" href="#" title="意见反馈">意见反馈</a> <a id="scrollUp" href="javascript:;" title="飞回顶部"></a>
  <div class="qr_img"><img src="images/ewm.jpg" width="150" height="150" /></div>
</div>
$(function(){
 var $bottomTools = $('.bottom_tools');
 var $qrTools = $('.qr_tool');
 var qrImg = $('.qr_img');
 
 $(window).scroll(function () {
  var scrollHeight = $(document).height();
  var scrollTop = $(window).scrollTop();
  var $windowHeight = $(window).innerHeight();
  scrollTop > 50 ? $("#scrollUp").fadeIn(200).css("display","block") : $("#scrollUp").fadeOut(200);   
  $bottomTools.css("bottom", scrollHeight - scrollTop > $windowHeight ? 40 : $windowHeight + scrollTop + 40 - scrollHeight);
 });
 
 $('#scrollUp').click(function (e) {
  e.preventDefault();
  $('html,body').animate({ scrollTop:0});
 });

 $qrTools.hover(function () {
  qrImg.fadeIn();
 }, function(){
   qrImg.fadeOut();
 });
 
});
.bottom_tools{position:fixed;z-index:1070;right:40px;bottom:40px;}
.bottom_tools>*{font:0/0 a;display:block;margin-top:5px;color:transparent;border:0;background-color:transparent;text-shadow:none}
.qr_img{position:absolute;top:-189px;left:-183px;display:none; width:173px; height:234px; background:url(images/qr_img.png) no-repeat;}
.qr_img img{ width:150px; margin:0 auto; display:block; margin-top:30px;}
#scrollUp{width:45px;height:45px;background-image:url(images/backgrounds.32.png);background-position:-54px -53px;display:none;}
#scrollUp:hover{background-image:url(images/backgrounds.32.png);background-position:-100px -53px}
#feedback{width:45px;height:45px;background-image:url(images/backgrounds.32.png);background-position:-102px 0}
#feedback:hover{background-image:url(images/backgrounds.32.png);background-position:-146px -46px}
.qr_tool{width:45px;height:45px;background-image:url(images/backgrounds.32.png);background-position:-148px 0;cursor:pointer;}
.qr_tool:hover {width: 45px;height: 45px;background-image: url(images/backgrounds.32.png);background-position: -192px -46px;}

返回顶部中需要的背景图片

案例:jQuery 返回顶部(返回顶部、微信、评论、反馈) js/jQuery 第3张案例:jQuery 返回顶部(返回顶部、微信、评论、反馈) js/jQuery 第4张案例:jQuery 返回顶部(返回顶部、微信、评论、反馈) js/jQuery 第5张

发表评论