1、图片动态展示
<template>
<div class="container">
<div class="url-container">
<ul>
<li v-for="(item,index) in list" :key='index' @mouseenter="handleToEnter(item,index)"
:class="[activeIndex == index? 'active': '', {'index1': !index}]"> //给li标签的第一项添加样式。!index为true.
<div class="item-style">
<h4>{{item.title}}</h4>
</div>
<div class="div1" :style="{background: item.color}"></div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'homeheader',
data () {
return {
list: [{
id: 1,
title: '园林酒店',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150422_ifold1.jpg) no-repeat center 0'
},{
id: 2,
title: '情侣酒店',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold2.jpg) no-repeat center 0'
},{
id: 3,
title: '设计师酒店',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold3.jpg) no-repeat center 0'
},{
id: 4,
title: '青年旅舍',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold4.jpg) no-repeat center 0'
},{
id: 5,
title: '特色客栈',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold5.jpg) no-repeat center 0'
},{
id: 6,
title: '海岛酒店',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold6.jpg) no-repeat center 0'
},{
id: 7,
title: '海外温泉',
color: 'url(//file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold7.jpg) no-repeat center 0'
}],
activeIndex: null,
}
},
methods: {
handleToEnter(item,index) {
this.activeIndex = index
let a =document.getElementsByTagName('li')
if (index == 0) {
a[0].style.width = '402px'
}else{
a[0].style.width = '133px'
}
}
}
}
</script>
<style lang='scss'>
.container{
margin-top: 100px;
.url-container{
width: 1200px;
overflow: hidden;
margin: 0 auto;
ul{
width: 1200px;
height: 260px;
margin: 0 auto;
overflow: hidden;
li{
float: left;
width: 133px;
height: 260px;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-transition: width .5s;
transition: width .5s;
display: flex;
justify-content: center;
align-items: center;
.item-style{
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.3);
h4{
color: #fff;
width: 30px;
margin: 0 auto;
display: block;
font: 30px/30px Microsoft Yahei;
position: relative;
padding: 60px 0 0 0;
}
}
}
.div1{
width: 100%;
height: 100%;
}
.active{
width: 402px;
}
.index1{
width: 402px;
}
}
}
}
</style>