纯vue 鼠标移入移出放大手风琴特效 vue+jQuery vue鼠标悬停放大 vue鼠标悬停图片手风琴特效

最新推荐文章于 2024-03-18 00:08:46 发布

thinkasany

最新推荐文章于 2024-03-18 00:08:46 发布

阅读量2.1k

点赞数 2

文章标签： css vue.js

本文链接：https://blog.csdn.net/daddykei/article/details/107857031

版权

vue鼠标悬停图片手风琴特效

vue+jQuery
对样式学以致用使用纯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>

thinkasany

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
纯vue 鼠标移入移出放大手风琴特效 vue+jQuery vue鼠标悬停放大 vue鼠标悬停图片手风琴特效

vue鼠标悬停图片风琴特效开篇下载链接那有什么东西都是可以照搬的当然得有自己改的地方开篇日常切图搬砖中，不仅仅完成psd设计稿的样式，还需要增添一些效果增强交互效果代码是晚上下载的，那为什么还要发呢还不是因为下载要币下载链接该链接无需用币也可以查看演示https://www.mk2048.com/demo/demo_target_desc_ckkiiahjkaa.html那有什么东西都是可以照搬的当然得有自己改的地方这个特效是默认加载了一个on的 class，然后不管怎么样
复制链接

扫一扫