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