zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    集合运算在数据库中的应用
    mybatis先修改再查询,查询到是修改前的数据(事务)
    MySQL存储过程&函数&触发器&事件大一统
    MySQL令人咋舌的隐式转换
    [BX]和loop指令04 零基础入门学习汇编语言26
    函数05 零基础入门学习C语言36
    [BX]和loop指令06 零基础入门学习汇编语言28
    [BX]和loop指令05 零基础入门学习汇编语言27
    [BX]和loop指令05 零基础入门学习汇编语言27
    函数04 零基础入门学习C语言35
  • 原文地址:https://www.cnblogs.com/aten/p/9099255.html
Copyright © 2011-2022 走看看