<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
width:100%;
height: 100px;
background: #9960ff;
}
.nav_warpper{
width: 90%;
height:100%;
background: #FF9960;
margin: 0 auto;
}
.nav_log{
width: 240px;
height: 100%;
background: #eee666;
float: left;
}
li{
list-style: none;
line-height: 100px;
}
li a{
text-decoration: none;
}
.ul_dispaly{
display: flex;
justify-content: space-around;
align-items: center;
}
.nav_bott{
width: 100%;
height: 100px;
}
.nav_warpper_bottom{
width: 90%;
height:100px;
margin: 0 auto;
overflow: hidden;
margin-top:20px;
position: relative;
top: 0px;
}
.go_left{
position: absolute;
top: 0px;
}
.go_left li{
width: 150px;
height: 90px;
float: left;
margin-left: 57px;
}
.go_left li img{
width:100%;
height: 100%;
margin-left: 2000px;
transition: all linear 1.5s;
}
#top_ale{
width:100px;
height: 100px;
position: fixed;
top: 600px;
background: red;
}
#header{
width: 100%;
height: 100px;
background: red;
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<div id="header" style="display: none;">
</div>
<div id="nav" style="display: block;">
<div class="nav_warpper">
<div class="nav_log">
</div>
<div class="nav-right">
<ul class="ul_dispaly">
<li><a href="##">列表1</a></li>
<li><a href="##">列表2</a></li>
<li><a href="##">列表3</a></li>
<li><a href="##">列表4</a></li>
<li><a href="##">列表5</a></li>
<li><a href="##">列表6</a></li>
<li><a href="##">列表7</a></li>
<li><a href="##">列表8</a></li>
</ul>
</div>
</div>
</div>
<div class="nav_bott">
<div class="nav_warpper_bottom">
<ul class="go_left">
<li><img src="img/dome01.jpg" alt="" /></li>
<li><img src="img/dome02.jpg" alt="" /></li>
<li><img src="img/dome05.jpg" alt="" /></li>
<li><img src="img/dome06.jpg" alt="" /></li>
<li><img src="img/dome07.jpg" alt="" /></li>
<li><img src="img/dome11.jpg" alt="" /></li>
<li><img src="img/dome04.jpg" alt="" /></li>
<li><img src="img/dome03.jpg" alt="" /></li>
</ul>
<ul class="go_left">
<li><img src="img/dome07.jpg" alt="" /></li>
<li><img src="img/dome11.jpg" alt="" /></li>
<li><img src="img/dome04.jpg" alt="" /></li>
<li><img src="img/dome03.jpg" alt="" /></li>
<li><img src="img/dome01.jpg" alt="" /></li>
<li><img src="img/dome02.jpg" alt="" /></li>
<li><img src="img/dome05.jpg" alt="" /></li>
<li><img src="img/dome06.jpg" alt="" /></li>
</ul>
<ul class="go_left">
<li><img src="img/dome12.jpg" alt="" /></li>
<li><img src="img/dome11.jpg" alt="" /></li>
<li><img src="img/dome04.jpg" alt="" /></li>
<li><img src="img/dome08.jpg" alt="" /></li>
<li><img src="img/dome01.jpg" alt="" /></li>
<li><img src="img/dome02.jpg" alt="" /></li>
<li><img src="img/dome09.jpg" alt="" /></li>
<li><img src="img/dome06.jpg" alt="" /></li>
</ul>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="top_ale"></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var ls=null;
var str=document.getElementsByClassName("ul_dispaly")[0].children;
var img_list=document.getElementsByClassName("nav_warpper_bottom")[0].children;
console.log(img_list);
for(let i=0;i<str.length;i++){
str[i].οnclick=function(){
for(let k=0;k<img_list.length;k++){
//if判断显示
if(i==k){
ls=k;
}
//bottomhidden实现隐藏
bottomhidden(img_list[k]);
img_list[k].style.display="none";
}
//bottom实现显示
bottom(img_list[ls]);
}
}
var array=[];
//显示滑动方法调用
function bottom(img){
img.style.display="block";
array=[];
var img_list=img.children;
for(let s=0;s<img_list.length;s++){
var img=img_list[s].children;
array.push(img);
}
for (var i= 0; i < array.length; i++) {
var num=array[i][0].offsetWidth;
array[i][0].style.marginLeft=0+"px";
}
}
var hidden=[];
//隐藏滑动方法调用
function bottomhidden(img){
hidden=[];
var img_list=img.children;
for(let s=0;s<img_list.length;s++){
var img=img_list[s].children;
hidden.push(img);
}
for (var i= 0; i < hidden.length; i++) {
hidden[i][0].style.marginLeft=2000+"px";
}
}
$(".nav-right").mousemove(function(){
$(".go_left").css("display","block");
})
$(".nav-right").mouseout(function(){
$(".go_left").css("display","none");
})
//根据滚动条位置设置样式
window.οnscrοll= function(){ //计算滚动条位置，改变样式
//变量t是滚动条滚动时，距离顶部的距离
var t = document.documentElement.scrollTop||document.body.scrollTop;
var scrollTow= document.getElementById('header');
var scroll= document.getElementById('nav');
//当滚动到距离顶部200px时，返回顶部的锚点显示
if(t<=200){
scroll.style.display="block";
scrollTow.style.display="none";
}else{ //恢复正常
scroll.style.display="none";
scrollTow.style.display="block";
}
}
//点击返回顶部动画
$("#top_ale").click(function(){//把浏览器滚动条的位置设置为0
$('html,body').animate({scrollTop:0});
})
</script>
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
