工作需要写了个鼠标悬浮滚动窗

<template><!--    左侧弹出栏--><div style="margin-left: -12px;"><div v-for="(item,index) in listInformation" :key="index" style="cursor:pointer;margin-bottom: 10px;" @click="openPopup(index)"><!--          父组件传值--><div class="a1" style="display: flex;position: relative;overflow: hidden"><div style="display: flex"><div class="a2" style="height: 80px;background-color: #FFFFFF;"></div><div style="width: 80px;height: 80px; background-color: #FFFFFF;border-radius: 0% 50% 50% 0%;"></div></div><div style="display: flex;align-items: center;position:absolute;margin: 20px 0 0 20px"><div style="display: flex;align-items: center;"><!--          父组件传值--><div style="height: 40px;width: 40px;display: flex;justify-content: center"><img v-if="dataAccomplish" style="height: 40px;" :src=item.img alt=""></div><!--          父组件传值--><div v-if="dataAccomplish" style="white-space:nowrap;font-size: 1.1rem;margin-left: 10px;">{{item.data}}</div></div><div style="width: 120px; margin: 0 0 0 30px;display: flex;align-items: center;"><!--          父组件传值--><div v-if="dataAccomplish" class="a3">名称: {{item.locationName}}</div></div></div></div></div></div>
</template><script>
export default {name: 'scrollWindow',props:{listInformation:{type:Array},dataAccomplish:{type:Boolean},},methods:{openPopup(state){this.$emit('openPopup',state)},}
}
</script><style lang="scss" scoped>
.a2{width: 70px;transition: width 0.2s linear 0s;
}
.a1:hover .a2{width: 190px;
}
.a3{color: rgba(0,0,0,0)
}
.a1:hover .a3{color:rgba(0,0,0,1)
}
</style>

<scrollWindow v-show="PopupState==null" :dataAccomplish="dataAccomplish" :listInformation="listInformation" @openPopup="openPopup"></scrollWindow>

工作需要写了个鼠标悬浮滚动窗相关推荐

html鼠标悬浮缩放,CSS3鼠标悬浮过渡缩放效果
以下为一个纯css写的图片鼠标悬浮缩放效果,其实基本原理十分简单,我们访问一些网站可以发现他们都会对图片做一些交互效果的处理,当然实现图片过渡效果有很多方式,例如使用JQuery或者一些第三方js动画 ...
css3探测光圈_CSS3按钮鼠标悬浮光圈效果
1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为We ...
li鼠标悬浮手势样式
一.问题描述写了一个ul li无序列表,想实现如下效果: 点击某一个li进行页面跳转鼠标悬浮到li上,默认是箭头,想改成手势二.处理方式 <li onclick="locatio ...
jQuery鼠标悬浮事件
今天学习了鼠标悬浮事件,跟小编来看看吧~ 先来看一下效果: 原本样式: 鼠标悬浮样式: 鼠标离开样式: 源码: <!DOCTYPE html> <html lang="en ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
鼠标滑轮滚动事件（记录下以后用到好找）
//兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该 ...
css3探测光圈_CSS3按钮鼠标悬浮实现光圈效果
这篇文章运用实例代码给大家介绍了利用CSS3如何实现按钮鼠标悬浮光圈效果,有需要的朋友们可以参考学习,下面来一起看看吧. 1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会 ...
歌词同步滚动，比市面的大多数效果都好，在平滑滚动的前提下加上了鼠标滚轮滚动以及上下拖拽功能
歌词滚动核心原理解析歌词文件,转换成JSON 对象,java 代码放在最下面将歌词时间部分存到数组,字符部分放到 HTML 标签里面,通过Jquery 选中所有歌词 $li ,拿到一个类似于数组的 ...

工作需要写了个鼠标悬浮滚动窗

工作需要写了个鼠标悬浮滚动窗相关推荐

最新文章

热门文章