js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 返回顶部

Metro扁平风格网页右侧浮动返回顶部特效代码

发布时间:2015-08-27 00:08:03    您是第0位浏览者

本js特效代码兼容:ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

Metro扁平风格网页右侧浮动返回顶部特效代码
<!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>Metro扁平风格网页右侧浮动返回顶部特效代码 - js特效代码网</title>    
<script type="text/javascript" src="js/jquery-1.7.2.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, "新宋体";background:#ddd;}    
/* leftsead */    
#leftsead{width:131px;height:143px;position:fixed;top:258px;right:0px;}    
*html #leftsead{margin-top:258px;position:absolute;top:expression(eval(document.documentElement.scrollTop));}    
#leftsead li{width:131px;height:60px;}    
#leftsead li img{float:right;}    
#leftsead li a{height:49px;float:right;display:block;min-width:47px;max-width:131px;}    
#leftsead li a .shows{display:block;}    
#leftsead li a .hides{margin-right:-143px;cursor:pointer;cursor:hand;}    
#leftsead li a.youhui .hides{display:none;position:absolute;right:190px;top:2px;}    
</style>    
</head>    
<body style="height:5000px;" >    
<div id="leftsead">    
<ul>    
<li><a href="http://www.jstxdm.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.jstxdm.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/youhui.png" width="145" height="343" class="hides" usemap="#taklhtml"/><map name="taklhtml"><area shape="rect" coords="26,273,115,300 " href="http://www.jstxdm.com" /></map></a></li>    
<li><a href="tencent://message/?uin=954502368&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.jstxdm.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><!--leftsead end-->    
<script type="text/javascript">    
$(document).ready(function(){    
	$("#leftsead 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}, 300);});    
});    
</script>      
</body>    
</html>



返回顶部 浮动

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

Metro扁平风格网页右侧浮动返回顶部特效代码

jQuery实现右侧悬浮在线客服、返回顶部代码

jQuery实现带二维码的返回顶部特效

jQuery仿威锋商城右侧多功能返回顶部特效

jQuery实现火箭图标返回顶部特效

纯css实现QQ音乐返回顶部和返回底部的快捷导航代码

jquery win8扁平风格返回顶部和在线客服网站侧边栏代码

jquery实现图翼网侧边带二维码的返回顶部特效

jQuery实现网页滚动显示浮动导航,并且带返回顶部按钮

div+css实现网页右侧返回顶部样式特效

jquery实现带微信二维码的返回顶部特效代码

jquery css3带微信二维码返回顶部特效代码

友荐云推荐
大家说 此评论不代表本站观点