iOS使用<marquee>标签,会有卡顿,效果不好所以换掉
刚开始使用 marquee 标签一切都正常,但是在某两台红米上,就不显示文字了,背景色还是有的,就是文字不出来
所以开始寻找替代方法;
找到 jquery 插件,找到两个,分别是
- jQuery.Marquee
- jquery.limarquee
jquery.limarquee 使用结果
首先弃用了 limaquee,因为根本不会动,调试了看到文字上面套了一层 div 它的 left 一直在变化,但是没有postion:absolute样式
可能是我的样式引用的不对,因为只在index.html文件里面引入了css文件。
jQuery.Marquee 使用过程
1、首先把jquery.js 和 jquery.marquee.js 两个文件download下来,拖到assets文件夹,网上说因为assets文件夹在重新编译过程中是不会被覆盖
2、在index.html文件中引用你刚刚拖入的文件
<script src="assets/jquery-2.1.1.min.js"></script>
<script src="assets/jquery.marquee.js"></script>
3、写代码
ts文件
declare var $: any;//在ts文件中使用先定义$为“接口”,这样就可以使用$
$('.dowebok').marquee({
duration: 50000,
gap: 120,
delayBeforeStart: 0,
direction: 'left',
});
html文件
<div class="notice" (click)="onClickBoard()">
<div class="notice_div_title">{{translateText.announcementText}}:</div>
<div class="notice_div_content">
<div class="wrap" *ngIf="schoolAnnouncement.length>=12">
<div class="cont">
<div class="marquee" data-speed="50">{{schoolAnnouncement}}</div>
</div>
</div>
<div *ngIf="schoolAnnouncement.length < 12">{{schoolAnnouncement}}</div>
</div>
</div>
css文件
//跑马灯
.notice{
display: flex;
flex-flow: row;
height: 36px;
line-height: 36px;
background: white;
border: 1px solid #ddd;
margin: 10px;
border-radius: 5px;
font-size: 15px;
.notice_div_title{
margin-left:12px;
}
.notice_div_content{
flex:1;
}
}
.wrap{
position: relative;
height: 34px;
font-size: 15px;
overflow: hidden;
}
.cont{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
遇到的问题:
- 文字不滚动:css添加width属性试一下
- 滚动到一半重新滚动:因为动画时间计算的不对,我的解决方法是在获取到数据后,又加了一秒延时,使得插件获取正确的字符串,计算出正确的动画时间