<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery右侧扁平化悬浮在线客服QQ代码 - 懒人之家</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* rightsead */
#rightsead{width:130px;height:350px;position:fixed; top:50%; margin-top:-175px;right:0px;}
*html #rightsead{margin-top:258px;position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#rightsead li{width:131px;height:60px;}
#rightsead li img{float:right;}
#rightsead li a{height:49px;float:right;display:block;min-width:47px;max-width:131px;}
#rightsead li a .shows{display:block;}
#rightsead li a .hides{margin-right:-143px;cursor:pointer;cursor:hand;}
#rightsead li a.youhui .hides{display:none;position:absolute;right:188px;top:2px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="rightsead">
<ul>
<li><a href="http://www.lanrenzhijia.com/"><img src="images/ll01.png" width="131" height="49" class="hides"/><img src="images/l01.png" width="47" height="49" class="shows" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="images/ll03.png" width="131" height="49" class="hides"/><img src="images/l03.png" width="47" height="49" class="shows" /></a></li>
<li>
<a class="youhui">
<img src="images/l02.png" width="47" height="49" class="shows" /><img src="images/lanrenzhijia.png" width="145" height="343" class="hides" usemap="#taklhtml"/>
<map name="taklhtml"><area shape="rect" coords="26,273,115,300 " href="http://www.lanrenzhijia.com/" /></map>
</a></li>
<li><a href="tencent://message/?uin=12345678&Site=test315.nesky.cn&Menu=yes"><img src="images/ll04.png" width="131" height="49" class="hides"/><img src="images/l04.png" width="47" height="49" class="shows" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="images/ll05.png" width="131" height="49" class="hides"/><img src="images/l05.png" width="47" height="49" class="shows" /></a></li>
<li><a id="top_btn"><img src="images/ll06.png" width="131" height="49" class="hides"/><img src="images/l06.png" width="47" height="49" class="shows" /></a></li>
</ul>
</div>
<!-- 代码部分end -->
<script>
$(function(){
$("#rightsead a").hover(function(){
if($(this).prop("className")=="youhui"){
$(this).children("img.hides").show();
}else{
$(this).children("img.hides").show();
$(this).children("img.shows").hide();
$(this).children("img.hides").animate({marginRight:'0px'},'slow');
}
},function(){
if($(this).prop("className")=="youhui"){
$(this).children("img.hides").hide('slow');
}else{
$(this).children("img.hides").animate({marginRight:'-143px'},'slow',function(){$(this).hide();$(this).next("img.shows").show();});
}
});
$("#top_btn").click(function(){if(scroll=="off") return;$("html,body").animate({scrollTop: 0}, 600);});
});
</script>
</body>
</html>
jquery右侧扁平化悬浮在线客服QQ代码.zip
版权申诉
179 浏览量
2023-09-26
01:42:42
上传
评论
收藏 148KB ZIP 举报
jquery右侧扁平化悬浮在线客服QQ代码.zip （14个子文件） 
js 
jquery.min.js 91KB
index.html 3KB images 
ll01.png 5KB l03.png 4KB ll06.png 5KB l04.png 3KB ll05.png 6KB l06.png 3KB l02.png 4KB ll04.png 5KB l05.png 4KB l01.png 3KB lanrenzhijia.png 66KB ll03.png 6KB资源评论
