欢迎来到w88模板网!
您的位置: 主页 > 网页特效 > 加载返回 >

Metro扁平风格网页右侧返回顶部特效

w88模板网加载返回 浏览:0

Metro扁平风格网页右侧返回顶部特效代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="https://www.w3.org/1999/xhtml" head meta http-equiv="Content-Typ

猜您喜欢

Metro扁平风格网页右侧返回顶部特效

Metro扁平风格网页右侧返回顶部特效代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,在线客服,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Metro扁平风格网页右侧返回顶部代码,属于站长常用代码,更多在线客服代码请访问JS代码频道。" />
<title>Metro扁平风格网页右侧返回顶部代码_</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body style="height:5000px">
<!-- 代码 开始 -->
<div id="leftsead">
<ul>
<li><a href="https://www.s188z.com/" target="_blank"><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="https://www.s188z.com/" target="_blank"><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="https://www.s188z.com/" /></map></a></li>
<li><a href="tencent://message/?uin=987654321&Site=www.ke01.com&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="https://www.s188z.com/" target="_blank"><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>

<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>
<!-- 代码 结束 -->

<div style="text-align:center;margin:50px 0">
<p>来源:<a href="https://www.s188z.com/" target="_blank"></a> 代码整理:<a href="https://www.s188z.com/" target="_blank"></a>

jQuery火箭回到星空顶部特效
« 上一篇 2017年06月24日
这是最后一篇
下一篇 »
有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!