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: '/wp-content/uploads/aaacj/20200328/21.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 ...
- vue uniapp 实现走马灯 ,文字横向滚动
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>vue ...
- vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marq ...
- vue 横向菜单滚动定位_使用vue组件+iscroll实现一个横向菜单,不能正确滑动
使用vue组件+iscroll实现一个横向菜单,可是却不能滑动,给父元素ul写死一个宽度可以滑动. 但是,我在computed里计算宽度,直接路由进去不能滑动,当我进入别的组件(切换路由)回来又可以滑 ...
- html页面加文字横向滚动,js实现文字横向滚动
页面布局 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 ...
- html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
- 原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了 转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
- vue中使用cube-ui实现横向滚动
vue中使用cube-ui实现横向滚动,可参考文档https://didi.github.io/cube-ui/#/zh-CN/docs/scroll, 下面是在编写的时候遇到的问题,做出的的总结 & ...
- html公告栏设计,原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了 转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
最新文章
- Django 错误汇总
- 关于Mysql5.6 Failed to open file error2的记录
- 服务器发送退出状态127,TCP正常建立和关闭的状态变化
- java分表插件_fastmybatis编写分表插件
- (chap8 确认访问用户身份的认证) BASIC认证(基本认证)
- py-faster-rcnn用自己的数据训练模型
- 【OpenPose-Windows】error1 OpenPose项目加载失败
- 【计算机组成原理】指令系统
- TCP/IP具体解释学习笔记——地址解析协议ARP
- Ubuntu 16.04安装PPA图形化管理工具Y PPA Manager
- mybatis注解的使用
- foremost文件删除恢复
- 解决方案PPT设计:如何作出标准通用型的目录页?
- 生活中不可或缺的赚钱智慧
- sqlmap常见命令
- QQ互联--个人资料提交审核
- 任正非:华为要做追上特斯拉的大乌龟
- android wifi 文件共享,一个Android WiFi 文件共享程序
- 读《大数据时代》有感
- Android 10.0在电话拨号盘(Dialer app中)通过暗码进入工厂测试模式