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>
    
  • 相关阅读:
    call()与apply()的作用与区别
    Tomcat8/9的catalina.out中文乱码问题解决
    怎样查看Jenkins的版本
    每日日报2020.8.18
    528. Random Pick with Weight
    875. Koko Eating Bananas
    721. Accounts Merge
    515. Find Largest Value in Each Tree Row
    286. Walls and Gates (Solution 1)
    408. Valid Word Abbreviation
  • 原文地址:https://www.cnblogs.com/aten/p/9099255.html
Copyright © 2011-2022 走看看