vue鼠标悬停图片手风琴特效
纯vue的放在第二个目录一 学以致用使用纯vue
vue+jQuery
开篇
日常切图搬砖中,不仅仅完成psd设计稿的样式,还需要增添一些效果增强交互效果
代码是网上下载的
下载链接
该链接无需用币 也可以查看演示
https://www.mk2048.com/demo/demo_target_desc_ckkiiahjkaa.html
哪有什么东西都是可以照搬的 当然得有自己改的地方
这个特效是默认加载了一个on的 class,然后不管怎么样 页面始终有一个是放大的 当然不大合适吧
虽然也没改几行,贴上
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue鼠标悬停图片风琴特效</title>
<link href="css/libiao.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="main_box">
<div class="box" id="app">
<ul>
<li :class="li.class" v-for="li in data">
<h3>{{li.name}}</h3>
<p>{{li.text}}</p>
<img :src="li.src" alt="img">
</li>
<div style="clear: both"></div>
</ul>
</div>
</section>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: function() {
return {
data: [{
class: "box_ul_li",
src: "images/1.png",
name: "图片1",
text: "文本1"
}, {
class: "box_ul_li",
src: "images/2.png",
name: "图片2",
text: "文本2"
}, {
class: "box_ul_li",
src: "images/3.png",
name: "图片3",
text: "文本3"
}, {
class: "box_ul_li",
src: "images/4.png",
name: "图片4",
text: "文本4"
}, {
class: "box_ul_li",
src: "images/5.png",
name: "图片5",
text: "文本5"
}, ]
}
}
})
$(".box ul li").mouseover(function() {
$(this).addClass('on').siblings().removeClass('on');
});
$(".box ul li").mouseleave(function() {
$(this).removeClass('on')
})
</script>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
body{margin: 0;padding: 0;}
ul{margin: 0;padding: 0; list-style: none;}
a{text-decoration: none;}
h3,p{margin: 0;font-weight: normal;}
.main_box{
width: 100%;
position: relative;
}
.box{
width: 1232px;
margin: 10px auto;
padding: 15px;
}
.box_ul_li{
width: 202px;
height: 300px;
box-shadow: 3px 2px 30px rgba(0,0,0,.1);
float: left;
text-align: center;
position: relative;
transition: all .6s ease-out;
}
.box ul li h3{
padding-top: 30px;
color: #333;
font-size: 18px;
}
.box ul li p{
margin-top: 7px;
color: #666;
font-size: 14px;
}
.box ul li img{
width: 150px;
position: absolute;
right: 26px;
bottom: 40px;
transition: all .6s ease-out;
}
.box ul .on{
width: 402px;
height: 400px;
background-color: #6ab0e8;
text-align: left;
}
.box ul .on h3{
padding-left: 20px;
color: #FFF;
}
.box ul .on p{
margin-left: 20px;
color: #FFF;
}
.box ul .on img{
width: 382px;
position: absolute;
right: 8px;
bottom: 10px;
border: 2px #3e3d3d solid;
}
对样式学以致用 使用纯vue
<template>
<div class="main_box">
<div class="box" id="app" >
<ul>
<li :class="li.class" v-for="li in licontainer" @mouseover="changeActive($event)" @mouseleave="removeActive($event)" >
<h3>{{li.name}}</h3>
<p>{{li.text}}</p>
<img :src="li.src" alt="img">
</li>
<div style="clear: both"></div>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return {
licontainer:[{
class: "box_ul_li",
src: require('../../src/assets/img/email.png'),
name: "图片1",
text: "文本1"
}, {
class: "box_ul_li",
src: require('../../src/assets/img/tel.png'),
name: "图片2",
text: "文本2"
}, {
class: "box_ul_li",
src: require('../../src/assets/img/email.png'),
name: "图片3",
text: "文本3"
}, {
class: "box_ul_li",
src: require('../../src/assets/img/tel.png'),
name: "图片4",
text: "文本4"
}, {
class: "box_ul_li",
src: require('../../src/assets/img/tel.png'),
name: "图片5",
text: "文本5"
}, ]
}
},
methods:{
changeActive($event) {
$event.currentTarget.className = 'box_ul_li on';
},
removeActive($event) {
$event.currentTarget.className = 'box_ul_li';
}
}
}
</script>
<style scoped>
.main_box{
background-color: white!important;
height: 500px;
width: 100%;
position: relative;
}
.box{
width: 1232px;
margin: 10px auto;
padding: 15px;
}
.box_ul_li{
width: 202px;
height: 300px;
box-shadow: 3px 2px 30px rgba(0,0,0,.1);
float: left;
text-align: center;
position: relative;
transition: all .6s ease-out;
}
.box ul li h3{
padding-top: 30px;
color: #333;
font-size: 18px;
}
.box ul li p{
margin-top: 7px;
color: #666;
font-size: 14px;
}
.box ul li img{
width: 150px;
position: absolute;
right: 26px;
bottom: 40px;
transition: all .6s ease-out;
}
.box ul .on{
width: 402px;
height: 400px;
background-color: #6ab0e8;
text-align: left;
}
.box ul .on h3{
padding-left: 20px;
color: #FFF;
}
.box ul .on p{
margin-left: 20px;
color: #FFF;
}
.box ul .on img{
width: 382px;
position: absolute;
right: 8px;
bottom: 10px;
border: 2px #3e3d3d solid;
}
</style>