百度换肤功能实现(vue)

这是效果图

鼠标移入左边小衣服那里，让小图显示，移出消失
鼠标移入左边小衣服那里，并且点击之后，就算移出，小图也不消失
鼠标移入小图，背景大图src替换为移入的小图的src，移出但不点击时，背景图变为原来那张

点击小图时，背景大图src替换为小图src且移出src不变

css部分

*{margin: 0;padding: 0;list-style: none;
}
html,body{width: 100%;height: 100%;overflow: hidden;
}
ul{top: -100px;position: absolute;z-index:999;width: 1050px;height: 100px;background-color: #fff;transition: all .5s ease-in-out;left: 50%;margin-left: -525px;animation: top ;opacity: 0.9;
}
ul li{float: left;position: relative;line-height: 72px;text-align: center;
}
ul li .a{position: relative;width: 120px;height: 72px;margin: 14px 15px;
}
.bg{position: fixed;width: 100%;left: 0;top: 0;
}
li:hover::after{content: attr(img-title);width: 120px;height: 72px;position: absolute;left: 15px;top: 14px;color: #F2F6FC;background-color: rgba(0,0,0,.5);
}
.left{position: absolute;z-index: 999;top: -25px;left: 50%;margin-left: -561px;transition: all ease 0.5s;
}
.sprite{width: 21px;height: 21px;position: absolute;top: 14px;left: 15px;overflow: hidden;z-index:9999;
}
.sprite img{width: 135px;height: 92px;position: absolute;left: -62px;top: -1px;
}

html部分

<!--利用事件委托  给最外层盒子增加鼠标移入事件-->
<div id="app" @mouseover.stop="leftOver"><!--利用一个变量flag判断此时状态   利用三元修改top值做到显示隐藏--><img src="data:image/img.png" alt="" class="left" :style="{top:flag?'0':'-25px'}" @click="imgClick"><ul :style="{top:flag?'0':'-100px'}"><!--定义两个变量记录背景大图的src   一个nowSrc为显示的src  一个src为记录的src值--><!--鼠标移入将item.src赋值给nowSrc  背景图变化  鼠标移出将记录的src赋值给nowSrc  让背景图重新变回之前的状态   创建一个点击事件将循环获得的item，index作为参数传递--><li v-for="(item,index) in srcList" @mouseover="nowSrc=item.src" @mouseleave="nowSrc=src" @click="click(item,index)" :img-title="item.title"><!--这个div是精灵图  小图上打钩的效果--><div class="sprite" v-if="index===imgIndex"><img src="data:image/tips.png" alt=""></div><img :src="item.src" alt="" class="a"></li></ul><img :src="nowSrc" alt="" class="bg">
</div>

script部分

new Vue({el: '#app',data: {flag: false,//记录当前点击图片下标imgIndex: 0,//记录左侧下拉图片是否被点击isClick: false,//记录值src: 'image/1.jpg',//显示值nowSrc: 'image/1.jpg',//数据srcList: [{title: '你', src: 'image/1.jpg'},{title: '是', src: 'image/2.jpg'},{title: '最', src: 'image/3.jpg'},{title: '棒', src: 'image/4.jpg'},{title: '最', src: 'image/5.jpg'},{title: '卷', src: 'image/6.jpg'},{title: '的', src: 'image/7.jpg'}]},methods: {click(item, index) {//点击事件将记录值src   显示值nowSrc  当前图片下标  变为点击的item.srcthis.src = item.srcthis.nowSrc = item.srcthis.imgIndex = index},leftOver(e) {//这个e代表mouseEvent  判断此时移入的是否为左侧下拉小图if (e.target.className === 'left') {//第一次鼠标移入时  要进行判断是否被点击过  如果没被点击过就不用管   如果之前点击就让状态重置if (this.flag && this.isClick) {this.isClick = false}this.flag = true//当鼠标只有移入背景大图时   让小图ul和左侧下拉图隐藏} else if (e.target.className === 'bg') {if (this.isClick) returnthis.flag = false}},imgClick() {//左侧下拉图片点击事件   当没有被点击且flag为true时  才让isClick变为trueif (this.flag && !this.isClick) this.isClick = trueelse {//当点击过  再点击应该让小图ul和左侧下拉图隐藏this.flag = !this.flagthis.isClick = this.flag}}}
})

这个显示隐藏确实写的有点绕，我表达的也不太清楚，大伙儿可以自己去试试效果，然后理解一下

百度换肤功能实现(vue)相关推荐

仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
vue移动助手实践（一）——基于vue的换肤功能
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目在线demo 项目在线演示demo(切换到移动端调试模式哦 ...
vue 实现换肤功能
公司项目要实现vue项目换肤功能,要求一套深色,一套浅色,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一.实现思路:切换选中的皮肤状态(light ...
VUE+ElementUI项目换肤功能
VUE+ElementUI项目换肤功能一.固定多套主题换肤设置页面 (views/layout.vue) themes.js (@/utils/themes) main.js css相关结构及内容 ...
浏览器换肤功能项目案例百度换肤
大家好我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
为微信小程序增加换肤功能
起源之前,我做了一个展示类的微信小程序,本来都快要完结的了,可是突然,我才听说还要给小程序增加一个换肤功能,这个换肤功能可不是简单的写两套不同的样式表就行了,因为他要可以在后台动态替换背景,底图,文 ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
后台管理系统换肤功能问题整理
后台管理系统换肤功能问题整理一.vuex获取数据二.点击确定更换颜色,更新需要换颜色的页面,这里用到了vue页面的实时更新一.vuex获取数据 computed计算属性获取state里面的值 c ...

百度换肤功能实现(vue)

百度换肤功能实现(vue)

css部分

html部分

script部分

百度换肤功能实现(vue)相关推荐

最新文章

热门文章