发一个简短的置顶和显示二维码的一段代码,需要的拿去

jerry thinkphp 2015年11月19日 收藏
发一个简短的置顶和显示二维码的一段代码,需要的拿去
CSS样式的实现
  1. .left-float{position:fixed; right:40px; bottom:60px; width:40px; height:140px; z-index:10000000;}
  2. .left-float .qr-code,.left-float .gototop{width:40px; height:40px; padding:10px; margin-bottom:5px; background:#FFFFFF; text-align:center; line-height:40px; font-size:40px; cursor:pointer; color:#428BCA; font-family:"微软雅黑"; font-weight:bold;}
  3. .left-float .gototop{display:none;}
  4. .left-float .qr-code-box{width:250px; height:250px; position:absolute; left:-250px; top:-100px; overflow:hidden; display:none;}
  5. .left-float .qr-code-box img{width:250px; height:250px;}
html代码的实现
  1. <!--返回顶部和二维码显示-->
  2. <div class="left-float midfix">
  3.     <div class="qr-code"> ※ </div>
  4.     <div class="qr-code-box">
  5.         <img src="__PUBLIC__/Static/img/weixin.jpg" alt="{$site_name}" />
  6.     </div>
  7.     <div class="gototop" id="goToTop"> ∴ </div>
  8. </div>
javascript代码的实现
  1. <script type="text/javascript">
  2. $(window).scroll(function(){
  3.     var scrTop = $(window).scrollTop();
  4.     var windowTop = $(window).height();
  5.     if ((windowTop-300)<scrTop){
  6.         $(".gototop").fadeIn("slow");
  7.     }else{
  8.         $(".gototop").fadeOut("slow");
  9.     }
  10. });

  11. $('.qr-code').mouseenter(function(){
  12.     $('.qr-code-box').fadeIn("slow");
  13. }).mouseleave(function(){
  14.     $('.qr-code-box').fadeOut("slow");
  15. });
  16. $('#goToTop').click(function(){
  17.     $('html,body').animate({scrollTop: '0px'}, 300);
  18. });
  19. </script>