<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人作品网</title>
<link rel="stylesheet" href="css/HM1.css">
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/HM1.js" type="text/javascript"></script>
</head><body> <div class="cehua_mask"></div> <div class="silder"> <ul> <li><a href="boke.html">首页</a></li> <li><a href="#">个人作品</a></li> <li><a href="#">案例赏析</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">商业合作</a></li> </ul> </div> <div class="top"> <a href="#"> <img src="img/logo_03.png" alt=""> </a> <p>TOP</p> </div></body><!---外部的js是--->// JavaScript Document /*侧边栏隐藏*/$(".dianji").click(function () { "use strict"; $(".cehua_mask").fadeIn(); $(".silder").css("right",0);});$(".cehua_mask").click(function () { "use strict"; $(".cehua_mask").fadeOut(); $(".silder").css("right",-300);}); /*到这里是侧边栏隐藏*/ /*下面是置顶按钮*/$(window).scroll(function(){ "use strict"; if($(window).scrollTop()>100){ $(".top").css("display","block"); } else{ $(".top").css("display","none"); }});$(".top").click(function(){ "use strict"; $("html").animate({ scrollTop:0 },300);});/*置顶按钮到这里*/<!---外部的css是--->/*侧滑栏*/.cehua_mask{ display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.3);}.silder{ background: #333; position: fixed; top: 0; right: -300px; bottom: 0; width: 300px; transition: 0.5s;}.silder ul li{ margin-top: 30px; padding: 20px;}.silder ul li:hover{ background: #7F7F7F;}.silder ul li a{ color: #fff;}/*置顶按钮*/.top{ display: none; width: 50px; height: 30px; position: fixed; right: 30px; bottom: 120px;}.top p,img{ width: 100%; text-align: center;}
添加回答
举报
0/150
提交
取消