按jquery效果，使用vue复刻出来
jquery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100%;
background: url("images/0.jpg");
background-attachment: fixed;
background-position: -50px 0;
background-size: 120% 100%;
}
ul,
ol,
li {
list-style: none;
}
.web {
position: fixed;
top: -127px;
left: 0;
width: 100%;
height: 127px;
line-height: 127px;
text-align: center;
/* border: 1px solid #ddd; */
background: rgba(255, 255, 255, .86);
transition: all 1s ease;
}
.web ul {
width: 928px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.web ul li {
position: relative;
width: 138px;
height: 76px;
float: left;
margin-right: 20px;
}
.web ul li:last-child {
margin-right: 0;
}
.web ul li img {
width: 138px;
height: 76px;
}
.tips {
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url("images/tips.png") -94px -4px;
}
.button {
width: 36px;
height: 56px;
position: absolute;
top: 0;
left: 20px;
background: url("images/button.png");
z-index: 10;
}
</style>
</head>
<body>
<div class="button" id="toggle"></div>
<div class="web" id="web">
<ul id="nav-list">
<li>
<!-- <span class="tips"></span> -->
<img src="images/0.jpg" />
</li>
<li><img src="images/1.jpg" />
</li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<!-- 1. 引入jquery库 -->
<script src="./libs/jquery.js"></script>
<script>
// 等待页面的 DOM 加载完毕之后再执行
$(function () {
// console.log(1)
// 创建一个DOM元素
var tips = '<span class="tips"></span>'
var lis = $('#nav-list li')
var count = 0
var flag = true
// console.log(lis)
// 给所有的li 添加一个 tips 并隐藏
lis.append(tips).find('.tips').hide()
// 找到第一个元素并显示
lis.eq(0).find('.tips').show()
// 事件触发
// 事件源.事件的类型(事件的处理函数)
lis.click(function () {
// $(this) 表示点击的当前元素
// console.log($(this).index())
// lis.eq()
// 保存当前点击的下标
var index = $(this).index()
count = index
// console.log(lis.eq(index).find('.tips').show().parent())
// 点击具体的元素 然后添加 tips 并查找兄弟元素 带有tips的 都隐藏
lis.eq(index).append(tips).siblings().find('.tips').remove();
show(index)
})
function show(index) {
$('body').css({
'background-image': 'url(./images/' + index + '.jpg)'
})
}
// 鼠标悬浮的时候
lis.mouseover(function () {
var index = $(this).index()
show(index)
})
// 鼠标离开的时候
lis.mouseout(function () {
show(count)
})
$('#toggle').click(function () {
$('#web').css({
top: getTop()
})
flag = !flag
})
function getTop() {
return flag ? '0' : '-127px'
}
})
</script>
</body>
</html>
效果：
vue：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100%;
background-image: url("images/0.jpg");
background-attachment: fixed;
background-position: -50px 0;
background-size: 120% 100%;
}
ul,
ol,
li {
list-style: none;
}
.web {
position: fixed;
top: -127px;
left: 0;
width: 100%;
height: 127px;
line-height: 127px;
text-align: center;
/* border: 1px solid #ddd; */
background: rgba(255, 255, 255, .86);
transition: all 1s ease;
}
.web ul {
width: 928px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.web ul li {
position: relative;
width: 138px;
height: 76px;
float: left;
margin-right: 20px;
}
.web ul li:last-child {
margin-right: 0;
}
.web ul li img {
width: 138px;
height: 76px;
}
.tips {
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url("images/tips.png") -94px -4px;
}
.button {
width: 36px;
height: 56px;
position: absolute;
top: 0;
left: 20px;
background: url("images/button.png");
z-index: 10;
}
</style>
</head>
<body>
<!-- 小按钮点击显示tab栏 -->
<div id="app">
<div class="button" id="toggle" @click="changeTab()"></div>
<div class="web" id="web">
<ul @click="changeBg($event)" id="nav-list">
<li v-for="(item,key) in obj":key = "key" @mouseover="show($event)" @mouseout="showOut($event)">
<img :src="item" alt="" :index="key">
<span class="tips" v-if="key==index?true:false"></span>
</li>
</ul>
</div>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// 开关
flag:true,
// 数据
obj:{
li0:"./images/0.jpg",
li1:"./images/1.jpg",
li2:"./images/2.jpg",
li3:"./images/3.jpg",
li4:"./images/4.jpg",
li5:"./images/5.jpg",
},
index:"li0",//默认小√在第一张图片
now:"./images/0.jpg"
},
methods: {
changeTab(){
// 小按钮点击tab栏出现与隐藏
document.querySelector("#web").style.top = this.flag?"0":"-127px"
return this.flag = !this.flag
},
// 改变背景图片
changeBg(e){
this.show(e)
this.now = e.path[0].src
this.index = e.path[0].getAttribute("index")
},
// 改变背景图片,但是不改变小√
show(e){
document.querySelector("body").setAttribute("style",`background-image:url(${e.path[0].src})`)
},
// 切换背景图片为原来的
showOut(e){
document.querySelector("body").setAttribute("style",`background-image:url(${this.now})`)
}
}
})
</script>
</body>
</html>效果一样的不多展示了。ok看代码有注释的。