1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html公告栏设计 原生JS实现公告栏文字横向滚动(通告栏)

html公告栏设计 原生JS实现公告栏文字横向滚动(通告栏)

时间:2023-10-23 11:51:24

相关推荐

html公告栏设计 原生JS实现公告栏文字横向滚动(通告栏)

在做APP公告滚动的时候用到,感觉还不错,码了

转载地址:/zhangzeshan/article/details/83588979#commentsedit

先看下实现的效果

就是红色箭头部分指向的位置,字体会从右往左进行滚动

接下来看下html代码

尊敬的用户,您好!感谢您的长期支持,本平台目前提供的通道带积分,支持大部分银行,欢迎您的使用!

尊敬的用户,您好!感谢您的长期支持,本平台目前提供的通道带积分,支持大部分银行,欢迎您的使用!

尊敬的用户,您好!感谢您的长期支持,本平台目前提供的通道带积分,支持大部分银行,欢迎您的使用!

尊敬的用户,您好!感谢您的长期支持,本平台目前提供的通道带积分,支持大部分银行,欢迎您的使用!

尊敬的用户,您好!感谢您的长期支持,本平台目前提供的通道带积分,支持大部分银行,欢迎您的使用!

尊敬的用户,您好!感谢您的长期支持,本平台目前提供的通道带积分,支持大部分银行,欢迎您的使用!

CSS代码:

#scroll_div {

height:30px;

overflow: hidden;

white-space: nowrap;

width:100%;

background-color: #fff;

color: #999999;

margin: 1rem 0rem;

text-align: center;

}

#scroll_begin,#scroll_end {

display: inline;

}

JS代码:

//文字横向滚动

function ScrollImgLeft(){

var speed=50;//初始化速度 也就是字体的整体滚动速度

var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容

var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id

var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id

var scroll_div = document.getElementById("scroll_div");//获取整体的开头id

scroll_end.innerHTML=scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!

//定义一个方法

function Marquee(){

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)

scroll_div.scrollLeft-=scroll_begin.offsetWidth;

else

scroll_div.scrollLeft++;

}

MyMar=setInterval(Marquee,speed);//给上面的方法设置时间 setInterval

//鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停

scroll_div.onmouseover = function(){

clearInterval(MyMar);

}

//鼠标点击其他地方的时候,公告栏继续运动

scroll_div.onmouseout = function(){

MyMar = setInterval(Marquee,speed);

}

}

ScrollImgLeft();

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。