PC右侧导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<title>PC右侧导航</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="jquery.js"></script>
	<style>
		/* 回到顶部*/
		#rightsead ul{margin:0;padding:0;list-style-type:none;}
		#rightsead ul li{margin:0;padding:0;list-style-type:none;}
		#rightsead{135px;height:335px;position:fixed; top:18%; margin-top:0px;right:0px;z-index:999}
		*html #rightsead{margin-top:258px;position:absolute;top:expression(eval(document.documentElement.scrollTop));}
		#rightsead li{135px;height:73px;}
		#rightsead li img{float:right;}
		#rightsead li a{height:64px;float:right;display:block;min-71px;max-135px;}
		#rightsead li a .shows{display:block;}
		#rightsead li a .hides{margin-right:-186px;cursor:pointer;cursor:hand;}
		#rightsead li a.youhui .hides{display:none;position:absolute;right:188px;top:2px;}
	</style>
	<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>
</head>
<body>
<!--回到顶部-->
	<div id="rightsead">
	<ul>
		<li>
			<a href="#" target="_blank">
				<img src="dqq.png" class="hides" style="margin-right: -143px; display: none;" width="162.4" height="71.2">
				<img src="qq.jpg" class="shows" style="display: block;" width="69.6" height="71.2">
			</a>
		</li>
		<li>
			<a href="#" target="_blank">
				<img src="dwx.png" class="hides" style="margin-right: -143px; display: none;" width="162.4" height="71.2">
				<img src="wx.gif" class="shows" style="display: block;" width="69.6" height="71.2">
			</a>
		</li>
		<li>
			<a href="#" target="_blank">
				<img src="dtell.png" class="hides" style="margin-right: -143px; display: none;" width="162.4" height="71.2">
				<img src="tell.gif" class="shows" style="display: block;" width="69.6" height="71.2">
			</a>
		</li>
		<li>
			<a href="#" target="_blank">
				<img src="dxinxi.png" class="hides" style="margin-right: -143px; display: none;" width="162.4" height="71.2">
				<img src="xinxi.gif" class="shows" style="display: block;" width="69.6" height="71.2">
			</a>
		</li>
	</ul>
	<div id="top_btn">
		<img src="hddb.jpg" style="display: block;float:right;" width="69.6" height="71.2">
	</div>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/aten/p/9099255.html