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

标签：

滚动条滚动到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‘;
　　}　　//鼠标移到“绿色微信图片”上时，显示二维码图片

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

标签：

原文地址：http://www.cnblogs.com/ybingbing_1213/p/4788117.html