首先我们在#service放置微信、QQ、电话及返回顶部四个按钮。
<div id="service">
<ul>
<li>
<a href="javascript:void(0)" class="weixin_area">
<img src="images/l02.png" width="47" height="49" class="shows" />
<img src="images/a.png" width="57" height="49" class="hides" />
<img src="images/weixin.jpg" width="145" class="weixin" style="display:none;margin:-100px 57px 0 0" />
</a>
</li>
<li>
<a href="http://wpa.qq.com/msgrd?v=3&uin=800022936&site=qq&menu=yes" target="_blank">
<div class="hides" style="width:161px;display:none;" id="qq">
<div class="hides" id="p1">
<img src="images/ll04.png">
</div>
<div class="hides" id="p2"><span style="color:#FFF;font-size:13px">800022936</span>
</div>
</div>
<img src="images/l04.png" width="47" height="49" class="shows" />
</a>
</li>
<li id="tel">
<a href="javascript:void(0)">
<div class="hides" style="width:161px;display:none;" id="tels">
<div class="hides" id="p1">
<img src="images/ll05.png">
</div>
<div class="hides" id="p3"><span style="color:#FFF;font-size:12px">0551-65371998</span>
</div>
</div>
<img src="images/l05.png" width="47" height="49" class="shows" />
</a>
</li>
<li id="btn">
<a id="top_btn">
<div class="hides" style="width:161px;display:none">
<img src="images/ll06.png" width="161" height="49" />
</div>
<img src="images/l06.png" width="47" height="49" class="shows" />
</a>
</li>
</ul>
</div> 鼠标悬浮各个按钮及离开代码:
$("#service a").hover(function() {
if ($(this).prop("className") == "weixin_area") {
$(this).children("img.hides").show();
} else {
$(this).children("div.hides").show();
$(this).children("img.shows").hide();
$(this).children("div.hides").animate({
marginRight: '0px'
},
'0');
}
},
function() {
if ($(this).prop("className") == "weixin_area") {
$(this).children("img.hides").hide();
} else {
$(this).children("div.hides").animate({
marginRight: '-163px'
},
0,
function() {
$(this).hide();
$(this).next("img.shows").show();
});
}
}); 返回顶部代码:
$("#top_btn").click(function() {
$("html,body").animate({scrollTop: 0}, 600);
}); 鼠标悬浮微信上方和离开代码:
$(".weixin_area").hover(function() {
$(this).children(".weixin").show();
},function(){
$(this).children(".weixin").hide();
})
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
