<!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;
}
相关分类