【技术】悬浮微信二维码微博分享置顶

【技术】悬浮微信二维码微博分享置顶

滚动条滚动到50后:

【技术】悬浮微信二维码微博分享置顶

html部分:

<li style="display:none;height:50px;" id="li-top"><a id="top" href="#top"></a></li>

js部分:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(window).scrollTop() > 50) {    //滚动条滚动到50的时候出现“返回顶部”图片
      $(‘#li-top‘).fadeIn(800);
    } else {
      $(‘#li-top‘).fadeOut(800);
    }
  });
  $("#top").click(function() {
    $(‘body,html‘).animate({
      scrollTop: 0   //点击“返回顶部”图片时,滚动条滚动到高度为0的地方
    },
    1000);
    return false;
  });
});

【技术】悬浮微信二维码微博分享置顶

html部分:

<li style="height:50px">
  <a id="weixin" href="javascript:void(0)" onmouseover="showEWM()" onmouseout="hideEWM()">
    <div id="EWM"><img src="images/weixin_code.jpg" /></div>
  </a>
</li>

css部分:

#weixin{background:url(../images/weixin.png) repeat scroll 0% 0% transparent;}

#weixin:hover{background:url(../images/weixind.png) repeat scroll 0% 0% transparent;}    //鼠标移到“绿色微信图片”上时,变为“腾讯微信”文字图片

 

#EWM{ position:absolute; left:40px; display:none;}
#EWM img{ width:150px; height:150px;}  //鼠标移到“绿色微信图片”上时,显示二维码图片

js部分:

function showEWM()
  {
    document.getElementById("EWM").style.display = ‘block‘;
  }
function hideEWM()
  {
    document.getElementById("EWM").style.display = ‘none‘;
  }  //鼠标移到“绿色微信图片”上时,显示二维码图片

【技术】悬浮微信二维码微博分享置顶

上一篇:【架构师面试-Java编程基本功-4】-IO的区别与分类


下一篇:【免费】捷微微信管家公众号运营培训开课啦!