vue内容横向循环滚动_vue文字横向滚动公告
需求
最新项目需要一个文字横向滚动效果,
vue 文字横向无缝走马灯组件
写的很详细,记录下来,广播出去。
解决方案
1、 HTML
先建一个div层作为公告显示区,里面包裹一个公告列表(ul);
2、 CSS
每条公告信息(li)的margin必须设置‘px’单位,否则要转换,后面js中回到起点还要用到这个值。
body,div,html,img,li,ul{margin:0;padding:0;border:0}
li{list-style:none}
.advert-top{position:relative;display:flex;width:100%;height:.88rem;background:linear-gradient(270deg,rgba(80,175,255,1) 0,rgba(13,132,248,1) 48%,rgba(55,159,248,1) 86%,rgba(81,176,255,1) 100%);color:#fff;font-size:.26rem;align-items:center}
.ico-horn{display:flex;width:.88rem;height:.88rem;justify-content:center;align-items:center}
.ico-horn>img{width:.32rem;height:.32rem}
/* 以下代码与滚动相关 */
.marquee-wrap{position:relative;display:flex;overflow:hidden;width:100%;height:100%}
.marquee-box{position:absolute;top:50%;display:flex;white-space:nowrap;transform:translateY(-50%)}
.marquee-list{margin-right:10px} /* 此处“px”方便回到起点 */
.marquee-list span{padding:0 .04rem;color:#ffe17b;font-weight:700}
3、 JavaScript
var vm = new Vue({
el: '#app',
data: {
ico_horn: 'https://img.alicdn.com/tfs/TB1zwftaPrguuRjy0FeXXXcbFXa-16-16.png',
message: "全球新冠肺炎确诊病例超45万,死亡人数破2万!",
},
mounted: function () {
// 延时滚动
setTimeout(() => {
this.runMarquee()
}, 1000)
},
methods: {
runMarquee() {
// 获取文字 计算后宽度
var width = document.getElementById('marquee').getBoundingClientRect().width,
marquee = document.getElementById('marquee-box'),
disx = 0; // 位移距离
//设置位移
setInterval(() => {
disx--; // disx-=1; 滚动步长
if (-disx >= width) {
disx = 10; // 如果位移超过文字宽度,则回到起点 marquee-list的margin值
}
// marquee.style.transform = 'translateX(' + disx + 'px)'
marquee.style.left = disx + 'px'
}, 30) //滚动速度
}
}
});
// JavaScript Document
(function px2rem(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
/*
* 100 -> html,body { font-size:100px; }
* 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
* 根据具体情况改变这两个数值
*/
};
if (!doc.addEventListener) return;
// 窗口大小发生变化,初始化
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
//防止在html未加载完毕时执行,保证获取正确的页宽
setTimeout(function () {
px2rem(doc, win);
}, 200);
})(document, window);
vue内容横向循环滚动_vue文字横向滚动公告相关推荐
- vue组件走马灯_vue文字横向滚动走马灯公告代码示例
需求 最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件 写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
- div内容横排 html_css如何让文字横向滑入?
css如何让文字横向滑入?下面本篇文章给大家介绍一下使用CSS实现文字横向滑入效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3文字横向滑入效果 HTML 将鼠标移 ...
- html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下. 实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体", ...
- vue 左右循环滑动_vue实现无缝滚动循环
大家好,我是一叶,最近做的项目用到循环滚动展示,在这里踩的坑和大家分享一下.一开始写的时候没打算用组件(其实是没找到),思路也很简单.把数据遍历之后,用js获取到可视范围的宽高,再逐次减去他的顶部高度 ...
- vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marq ...
- Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动 无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿 从头至尾再循环播放时没有停顿 实现这种情况可以使用CSS3的动画实现 ...
- 实现文字左右滚动 javascript
参考链接:http://www.86y.org/art_detail.aspx?id=587 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
- 原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了 转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
最新文章
- c语言程序设计分段定时器,单片机C语言编程定时器的几种表达方式
- jQuery reset
- php拆分jsion_Php如何返回json数据,前后端分离的基本解决方案
- Android activity之间的滑入切换
- Zookeeper分布式锁的使用
- mysql解决1055-Expression#22ofSELECT list is not in GROUP BY clause and contains nonaggregated column ‘
- CF1114F-Please, another Queries on Array?【线段树,欧拉函数】
- addEventListener的click和onclick的区别
- 模板题——快速幂,高斯消元
- 微信开发者工具的下载以及项目的创建
- python实现局域网内传输文件
- windows下安装redis详细教程
- 【VISIO安装问题】无法安装64位版本的office,因为在您的PC上找到以下32位程序
- 企业微信标签太多怎么删除?
- cups支持的打印机列表_更完整的CUPS打印机状态原因列表
- loj534. 「LibreOJ Round #6」花团
- OA系统,赋能企业办公管理建设专业化
- 【职业规划】第一篇:程序员分级之初级程序员
- 这帮死磕技术的理工男造了一支笔
- 用C语言实现简单的猜数字小游戏
热门文章
- 「第四篇」电赛控制题可以准备一些什么?
- 什么?电路板上还要喷漆?
- 天线的起源与发展历史
- 舵机不会玩?看这篇!
- 电路常识性概念(6)-VCC、VDD和VSS三种标号的区别
- linux测试dvi接口,Pro Capture-DVI 2路高清DVI采集卡 支持Linux系统更专业
- linux dmp文件大小,MAX_DUMP_FILE_SIZE参数:限制trace files及alert file大小
- python时间序列数据分析统计服_python数据分析之:时间序列二
- 配置mysql读写主从_Mysql主从配置,实现读写分离
- bfs理解——hdu6386好题