Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
2024-06-17 10:39:38
文章目录
- 前言
- 实现效果
- 关键代码
- 源码下载
- 参考文献
前言
基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动，以及文字在图片上缩略显示和全部显示。
实现效果
点击查看全部文本
关键代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动图片上添加文字-实现文字展开、收起效果</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body><div id="app"><el-carousel :interval="4000" height="890px" indicator-position="none"><el-carousel-item v-for="item in imgLIst" :key="item.id"><el-image style="width: 100%; height: 890px" :src="item.src"></el-image><p style="position: absolute; bottom: 0px; left: 0; background-color: white; opacity:0.9;display:none;text-align:left;border-radius:4px;" :class="item.id">{{item.desc}}<el-button style="line-height: 0" type="primary" @click.native="fadeInOrFadeOut(item.id)">收起</el-button></p><p style="position: absolute; bottom: 0px; left: 0; background-color: white; opacity:0.8;border-radius:4px;" :class="item.id">{{item.sdesc}}<el-button type="primary" icon="el-icon-more" @click.native="fadeInOrFadeOut(item.id)"></el-button></p></el-carousel-item></el-carousel></div>
</body>
<script>var app = new Vue({el: '#app',data: {imgLIst: [{"id": "carousel-item-1","src": "image/1.jpg","sdesc": "小说的价值本质是以时间为序列、以某","desc": "小说的价值本质是以时间为序列、以某一人物或几个人物为主线的，非常详细地、全面地反映社会生活中各种角色的价值关系(政治关系、经济关系和文化关系)的产生、发展与消亡过程。非常细致地、综合地展示各种价值关系的相互作用。"},{"id": "carousel-item-2","src": "image/2.jpg","sdesc": "与其他文学样式相比，小说的容量较大","desc": "与其他文学样式相比，小说的容量较大，它可以细致地展现人物性格和人物命运，可以表现错综复杂的矛盾冲突，同时还可以描述人物所处的社会生活环境。优势是可以提供整体的、广阔的社会生活。"},{"id": "carousel-item-3","src": "image/3.jpg","sdesc": "小说主要是通过故事情节来展现人物性格、","desc": "小说主要是通过故事情节来展现人物性格、表现中心的。故事来源于生活，但它通过整理、提炼和安排，就比现实生活中发生的真实实例更加集中，更加完整，更具有代表性。"},{"id": "carousel-item-4","src": "image/4.jpg","sdesc": "小说的环境描写和人物的塑造与中心思想有极","desc": "小说的环境描写和人物的塑造与中心思想有极其重要的关系。在环境描写中，社会环境是重点，它揭示了种种复杂的社会关系，如人物的身份、地位、成长的历史背景等等。自然环境包括人物活动的地点、时间、季节、气候、景物以及场景等等，用来表现人物的身份、地位。自然环境描写对表达人物的心情、渲染环境气氛都有不少的作用。"},{"id": "carousel-item-5","src": "image/5.jpg","sdesc": "小说是随着时代的发展而发展的：魏晋南北朝，文","desc": "小说是随着时代的发展而发展的：魏晋南北朝，文人的笔记小说，是中国古代小说的雏形；唐代传奇的出现，尤其是三大爱情传奇，标志着古典小说的正式形成；宋元两代，随着商品经济和市井文化的发展，出现了话本小说，为小说的成熟奠定了坚实的基础；明清小说是中国古代小说发展的高峰，当时是没有可超越者，四大名著皆发于此。"},{"id": "carousel-item-6","src": "image/6.jpg","sdesc": "纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(","desc": "纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(出自墨人钢《就是》创刊题词)便是所谓的“纯”。也就是说，小说在构思及写作的过程中能去尽政治谎言、道德谎言、商业谎言、维护阶级权贵谎言、愚民谎言等谎言，使呈现出来的小说成品具备纯粹的艺术性。小说的纯粹性是阅读者最重要的审美期待之一。随着时代的发展，不光是小说，整个文学的纯粹性逾来逾成为整个世界对文学审美的一个重要核心。"},{"id": "carousel-item-7","src": "image/7.jpg","sdesc": "东汉桓谭在其所著的《新论》中，对小说如是说：“若其","desc": "东汉桓谭在其所著的《新论》中，对小说如是说：“若其小说家，合丛残小语，近取譬论，以作短书，治身理家，有可观之辞。”认为小说仍然是“治身理家”的短书，而不是为政化民的“大道”。"}]},methods: {// 展开描述fadeInOrFadeOut(className) {$("." + className).fadeToggle();}}})
</script>
</html>
源码下载
点击下载源码
参考文献
css 淡入淡出
Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示相关推荐
- vue+Element ui中使用 upload实现Excel文件上传
文章目录 业务需求: 实现方式: 具体步骤: 1.引入组件: 2.data中定义: 3.methods中方法: 业务需求: 批量导入Excel文件 实现方式: 使用组件upload 具体步骤: 1.引 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
最新文章
- 用正则表达式获取指定的字符串续_取出所有符合要求的字符串
- tensorflow--embedding_lookup 和 embedding_lookup_sparse
- Java数据库篇6——多表查询
- 95-190-446-源码-window-Trigger-DeltaTrigger
- javaSE----进制
- 初识 Vue（10）---(计算属性的 setter 和 getter)
- LA4794 Sharing Chocolate
- python3.6安装步骤-手动安装python3.6的操作过程详解
- 收藏的关于开发的一些东西
- WINDOWS服务器时间校对
- Linux之Mysql升级
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
- 新装主机测试性能软件,装机必看 如何快速测试电脑性能?
- html静态页面图书馆管理,静态页面管理
- 随机生成11位的电话号码
- 地方政府争夺试点，互联网巨头参与测试，央行数字货币指日可待
- aps是什么意思_APS系统是什么意思？起什么作用
- BugKu -- 程序员本地网站
- 无线专题 openwrt feeds、web框架luci(lua语言)、UCI (统一配置接口)
- 视频直播软件开发需要什么？