js文字滚动js代码为什么在手机上谷歌下不显示文字
点击联系发帖人
时间：2017-12-21 07:37
js实现文字滚动效果
作者：小君君的博客
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了js实现文字滚动效果，类似于新闻板块中的公示公告，感兴趣的小伙伴们可以参考一下
首先先看一下大致效果图，因为是动态的，在页面无法显示出来。
具体的实现代码如下：
1.首先是css代码：
&style type="text/css"&
body,ul,li,a,p,div{padding:0 margin:0 font-size:14}
ul,li{list-style:}
a{ text-decoration: color:#333;}
overflow: /*溢出的部分不显示*/
height:228/*一定要确切，避免demo1与demo2之间的距离过大*/
#express li{
list-style:
font-size:14
margin:0px 5
line-height:180%;/*行与行之间的距离*/
letter-spacing:2/*字与字之间的距离*/
border-bottom:1px dashed #
2.内容代码如下：
&div id="demo" &
&div id="demo1" &
&ul id="express"&
&li&&a href="#"&召开背街小巷综合整治工作调度会&/a&&/li&
&li&&a href="#"&平原街道加大出店经营整治&/a&&/li&
&li&&a href="#"&平原街道召开计生业务培训会&/a&&/li&
&li&&a href="#"&平原街道：干部进村入户宣传促征迁&/a&&/li&
&li&&a href="#"&平原街道：为返乡群众免费孕检&/a&&/li&
&li&&a href="#"&平原街道：狠抓春运道路交通安全&/a&&/li&
&div id="demo2"&&/div&
3.最后是最关键的js代码：
&script type="text/javascript"&
//获取id=demo,id=demo1,id=demo2的元素对象，并把id=demo1的内容赋值给id=demo2
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML;
//给demo1,demo2加相同的高度
demo1.style.height=demo.offsetHeight+"px";
demo2.style.height=demo.offsetHeight+"px";
//定时器，每隔50毫秒调用一次scrollup()函数，来实现文字的滚动
var timer=window.setInterval("scrollup()",50);
//定义函数
function scrollup()
//如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动
if(demo.scrollTop&=demo.offsetHeight)
demo.scrollTop=0;
demo.scrollTop++;
//鼠标放上停止滚动，鼠标离开继续滚动
demo.onmouseover=function(){
//清除定时器
clearInterval(timer);
demo.onmouseout=function(){
//添加定时器
timer=window.setInterval("scrollup()",50);
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js文字滚动，为什么滚动一圈以后就停止了_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
js文字滚动，为什么滚动一圈以后就停止了
&script language=&javascript&&
var speed=50; //数字越大速度越慢
var demo=document.getElementById(&travel_0&);
var demo1=document.getElementById(&travel_1&);
var demo2=document.getElementById(&travel_2&);
demo2.innerHTML=demo1...
我有更好的答案
demo.scrollTop&=0)demo.scrollTop-=demo2刚才我也遇到这问题if(demo2.offsetTop-demo.scrollTop-=demo1.offsetHeight.offsetH改成 if(demo2.offsetHeight-demo.scrollTop<
采纳率：26%
在demo2那个div外面套再套一个div，设置它的属性height=“100%”
为您推荐：
其他类似问题
文字滚动的相关知识
换一换
回答问题，赢新手礼包急着需要文字左右滚动js代码_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
急着需要文字左右滚动js代码
本人急着需要js文字左右滚动代码
我有更好的答案
18);&/marq".scrollLeft & 1) {
} else if (marq.scrollLeft & id=&
setTimeout(&
marq.innerHTML += marq.innerHTML;
setTimeout(function () {script>.callee, 18);var marq =overflow: 1500) {
vari = -1;/div&script&>.scrollLeft +=
};<.getElementById(&marq&),
vari = 1&div style=&width: 200height:18px
把这个滚动的话呢？ie上可以看到&ul&&li&&/li&
&li&&span&  &/span&&/li&&/ul&
你这种结构的滚动可以网上找图片滚动代码来实现，一个原理，而且图片滚动都比较成熟了，现给你写的不能比
您有吗？有的话给我一个代码别？谢谢啊
carouFredSel
采纳率：34%
html 有个标签就支持上下左右滚动额。。marquee
我需要js的啊您有js代码吗？
var i = 0 ;
var len = $(&.news_img &ul & li&).size();
var delay = 3000;
function play(){
if(i == len){
$(&.news_img &ul & li&).fadeOut(500).eq(i).fadeIn(1000);
//$(&.num & a&).removeClass(¤t&).eq(i).addClass(¤t&);
var autoplay = setInterval(play,delay);这是个图片渐隐吉渐现的效果。你调下就OK了
关键是我不会啊有没有整体的全部代码啊？
我发给你的工具不行啊。。。。很好用啊
这是html用的不是js的
为您推荐：
其他类似问题
您可能关注的内容
js代码的相关知识
换一换
回答问题，赢新手礼包文字列表无缝向上滚动JavaScript代码；*{margin:0padding:0px；#demo2{height:text-；#demo1li{；list-style-type:hei；background:url()no-repea；#demo2li{；list-style-type:hei；background:u
<!DOCTYPE html PUBLIC \XHTML 1.0 Transitional//EN\\<html xmlns=\ <meta http-equiv=\文字列表无缝向上滚动JavaScript代码
<div id=\<ul id=\
<a href=\target=\Menu 仿QQ菜单管理器左侧菜单<a href=\target=\多层嵌套的一个层展开<a href=\《Java2核心技术卷2:高级特性》第7版<a href=\target=\、HTML教程打包下载 (CHM)<a href=\target=\《C++ Primer》中文第四版 chm<a href=\target=\工资管理系统(Access)<a href=\非常牛的左侧栏JS折叠菜单
<div id=\<div id=\
<table width=\height=\border=\align=\cellpadding=\cellspacing=\class=\
<td width=\height=\valign=\bgcolor=\class=\style46\
三亿文库包含各类专业文献、专业论文、文学作品欣赏、行业资料、应用写作文书、中学教育、各类资格考试、生活休闲娱乐、幼儿教育、小学教育、高等教育、58文字从下往上滚动JS特效等内容。
一段文字的滚动效果,常见于网站公告,鼠标放上停止...滚动速度、滚动区域的在小请分别在 JS 代码及 CSS...《Eclipse 从入门到精通》陈刚教程巨 著 (PDF)... 4.1.2 任务目标利用 js 效果,实现如下样式的新闻动态向上无缝滚动。 图 4.1....中间比较特殊,因为考虑到切片要尽量的小点,又利于内容的扩展。所以,中间 部分的... 文字从下往上滚动JS特效_计算机软件及应用_IT/计算机_专业资料。&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/... HTML 文字移动特效代码一、从右向左移 代码 &marquee direction=left&需要移动的文字&/marquee& 二、从左向右移 代码 &marquee direction=right&需要移动的文字&/... html字来回滚动htmljstag_电子/电路_工程科技_专业资料。html字来回滚动htmljs...值有 alternate(交 替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)... jquery文本向上滚动代码带上下翻转按钮的jQuery_计算机软件及应用_IT/计算机_专业资料...[ 网页特效 ] ... 网页中图片从上往下滚动切换效果代码_互联网_IT/计算机_专业资料。 图片从上往下...仿网页图片滚动效果 2页 免费 网页中制作文字与图片滚... 2页 免费喜欢... (二)效果示例 1、示例一――文字自左上向右下滚动 平安如意欢迎您 本例代码 &DIV align=center& &MARQUEE style=&FONT-SIZE: 30 WIDTH: 400 FILTER:...今天要实现个文字滚动的效果，一开始试了&marquee&&/marquee&这个标签，但是 发现效果不太好，不能无缝滚动，而且在手机上有卡顿不太流畅。决定用js去实现。
首先写个标签，注意下标签里面文字的长度要超出标签，因为我下面加了判断，如果没有超出就不会有滚动条，也就不会滚动哦~
#scrollobj{
min-width: 70px;
/*先在这里写个最小宽度*/
display: inline-block;
white-space: nowrap;
overflow: hidden;
&div id="scrollobj"&这里是滚动内容纯文字哈哈哈，滚动吧&/div&
在你的页面里调用这个方法就ok了。
function sc() {
var $scrollobj = document.getElementById('scrollobj');
function scroll(self) {
var tmp = (self.scrollLeft)++;
//当滚动条到达右边顶端时
if (self.scrollLeft == tmp) {
self.innerHTML += "&&&&" + self.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (self.scrollLeft &= self.firstChild.offsetWidth) {
self.scrollLeft = 0;
if ($scrollobj.scrollWidth & $scrollobj.offsetWidth) {
// 判断是否需要滚动
var timer = setInterval(function () {
scroll($scrollobj);
阅读(...) 评论()}
作者：小君君的博客
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了js实现文字滚动效果，类似于新闻板块中的公示公告，感兴趣的小伙伴们可以参考一下
首先先看一下大致效果图，因为是动态的，在页面无法显示出来。
具体的实现代码如下：
1.首先是css代码：
&style type="text/css"&
body,ul,li,a,p,div{padding:0 margin:0 font-size:14}
ul,li{list-style:}
a{ text-decoration: color:#333;}
overflow: /*溢出的部分不显示*/
height:228/*一定要确切，避免demo1与demo2之间的距离过大*/
#express li{
list-style:
font-size:14
margin:0px 5
line-height:180%;/*行与行之间的距离*/
letter-spacing:2/*字与字之间的距离*/
border-bottom:1px dashed #
2.内容代码如下：
&div id="demo" &
&div id="demo1" &
&ul id="express"&
&li&&a href="#"&召开背街小巷综合整治工作调度会&/a&&/li&
&li&&a href="#"&平原街道加大出店经营整治&/a&&/li&
&li&&a href="#"&平原街道召开计生业务培训会&/a&&/li&
&li&&a href="#"&平原街道：干部进村入户宣传促征迁&/a&&/li&
&li&&a href="#"&平原街道：为返乡群众免费孕检&/a&&/li&
&li&&a href="#"&平原街道：狠抓春运道路交通安全&/a&&/li&
&div id="demo2"&&/div&
3.最后是最关键的js代码：
&script type="text/javascript"&
//获取id=demo,id=demo1,id=demo2的元素对象，并把id=demo1的内容赋值给id=demo2
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML;
//给demo1,demo2加相同的高度
demo1.style.height=demo.offsetHeight+"px";
demo2.style.height=demo.offsetHeight+"px";
//定时器，每隔50毫秒调用一次scrollup()函数，来实现文字的滚动
var timer=window.setInterval("scrollup()",50);
//定义函数
function scrollup()
//如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动
if(demo.scrollTop&=demo.offsetHeight)
demo.scrollTop=0;
demo.scrollTop++;
//鼠标放上停止滚动，鼠标离开继续滚动
demo.onmouseover=function(){
//清除定时器
clearInterval(timer);
demo.onmouseout=function(){
//添加定时器
timer=window.setInterval("scrollup()",50);
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js文字滚动，为什么滚动一圈以后就停止了_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
js文字滚动，为什么滚动一圈以后就停止了
&script language=&javascript&&
var speed=50; //数字越大速度越慢
var demo=document.getElementById(&travel_0&);
var demo1=document.getElementById(&travel_1&);
var demo2=document.getElementById(&travel_2&);
demo2.innerHTML=demo1...
我有更好的答案
demo.scrollTop&=0)demo.scrollTop-=demo2刚才我也遇到这问题if(demo2.offsetTop-demo.scrollTop-=demo1.offsetHeight.offsetH改成 if(demo2.offsetHeight-demo.scrollTop<
采纳率：26%
在demo2那个div外面套再套一个div，设置它的属性height=“100%”
为您推荐：
其他类似问题
文字滚动的相关知识
换一换
回答问题，赢新手礼包急着需要文字左右滚动js代码_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
急着需要文字左右滚动js代码
本人急着需要js文字左右滚动代码
我有更好的答案
18);&/marq".scrollLeft & 1) {
} else if (marq.scrollLeft & id=&
setTimeout(&
marq.innerHTML += marq.innerHTML;
setTimeout(function () {script>.callee, 18);var marq =overflow: 1500) {
vari = -1;/div&script&>.scrollLeft +=
};<.getElementById(&marq&),
vari = 1&div style=&width: 200height:18px
把这个滚动的话呢？ie上可以看到&ul&&li&&/li&
&li&&span&  &/span&&/li&&/ul&
你这种结构的滚动可以网上找图片滚动代码来实现，一个原理，而且图片滚动都比较成熟了，现给你写的不能比
您有吗？有的话给我一个代码别？谢谢啊
carouFredSel
采纳率：34%
html 有个标签就支持上下左右滚动额。。marquee
我需要js的啊您有js代码吗？
var i = 0 ;
var len = $(&.news_img &ul & li&).size();
var delay = 3000;
function play(){
if(i == len){
$(&.news_img &ul & li&).fadeOut(500).eq(i).fadeIn(1000);
//$(&.num & a&).removeClass(¤t&).eq(i).addClass(¤t&);
var autoplay = setInterval(play,delay);这是个图片渐隐吉渐现的效果。你调下就OK了
关键是我不会啊有没有整体的全部代码啊？
我发给你的工具不行啊。。。。很好用啊
这是html用的不是js的
为您推荐：
其他类似问题
您可能关注的内容
js代码的相关知识
换一换
回答问题，赢新手礼包文字列表无缝向上滚动JavaScript代码；*{margin:0padding:0px；#demo2{height:text-；#demo1li{；list-style-type:hei；background:url()no-repea；#demo2li{；list-style-type:hei；background:u
<!DOCTYPE html PUBLIC \XHTML 1.0 Transitional//EN\\<html xmlns=\ <meta http-equiv=\文字列表无缝向上滚动JavaScript代码
<div id=\<ul id=\
<a href=\target=\Menu 仿QQ菜单管理器左侧菜单<a href=\target=\多层嵌套的一个层展开<a href=\《Java2核心技术卷2:高级特性》第7版<a href=\target=\、HTML教程打包下载 (CHM)<a href=\target=\《C++ Primer》中文第四版 chm<a href=\target=\工资管理系统(Access)<a href=\非常牛的左侧栏JS折叠菜单
<div id=\<div id=\
<table width=\height=\border=\align=\cellpadding=\cellspacing=\class=\
<td width=\height=\valign=\bgcolor=\class=\style46\
三亿文库包含各类专业文献、专业论文、文学作品欣赏、行业资料、应用写作文书、中学教育、各类资格考试、生活休闲娱乐、幼儿教育、小学教育、高等教育、58文字从下往上滚动JS特效等内容。
一段文字的滚动效果,常见于网站公告,鼠标放上停止...滚动速度、滚动区域的在小请分别在 JS 代码及 CSS...《Eclipse 从入门到精通》陈刚教程巨 著 (PDF)... 4.1.2 任务目标利用 js 效果,实现如下样式的新闻动态向上无缝滚动。 图 4.1....中间比较特殊,因为考虑到切片要尽量的小点,又利于内容的扩展。所以,中间 部分的... 文字从下往上滚动JS特效_计算机软件及应用_IT/计算机_专业资料。&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/... HTML 文字移动特效代码一、从右向左移 代码 &marquee direction=left&需要移动的文字&/marquee& 二、从左向右移 代码 &marquee direction=right&需要移动的文字&/... html字来回滚动htmljstag_电子/电路_工程科技_专业资料。html字来回滚动htmljs...值有 alternate(交 替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)... jquery文本向上滚动代码带上下翻转按钮的jQuery_计算机软件及应用_IT/计算机_专业资料...[ 网页特效 ] ... 网页中图片从上往下滚动切换效果代码_互联网_IT/计算机_专业资料。 图片从上往下...仿网页图片滚动效果 2页 免费 网页中制作文字与图片滚... 2页 免费喜欢... (二)效果示例 1、示例一――文字自左上向右下滚动 平安如意欢迎您 本例代码 &DIV align=center& &MARQUEE style=&FONT-SIZE: 30 WIDTH: 400 FILTER:...今天要实现个文字滚动的效果，一开始试了&marquee&&/marquee&这个标签，但是 发现效果不太好，不能无缝滚动，而且在手机上有卡顿不太流畅。决定用js去实现。
首先写个标签，注意下标签里面文字的长度要超出标签，因为我下面加了判断，如果没有超出就不会有滚动条，也就不会滚动哦~
#scrollobj{
min-width: 70px;
/*先在这里写个最小宽度*/
display: inline-block;
white-space: nowrap;
overflow: hidden;
&div id="scrollobj"&这里是滚动内容纯文字哈哈哈，滚动吧&/div&
在你的页面里调用这个方法就ok了。
function sc() {
var $scrollobj = document.getElementById('scrollobj');
function scroll(self) {
var tmp = (self.scrollLeft)++;
//当滚动条到达右边顶端时
if (self.scrollLeft == tmp) {
self.innerHTML += "&&&&" + self.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (self.scrollLeft &= self.firstChild.offsetWidth) {
self.scrollLeft = 0;
if ($scrollobj.scrollWidth & $scrollobj.offsetWidth) {
// 判断是否需要滚动
var timer = setInterval(function () {
scroll($scrollobj);
阅读(...) 评论()}
我要回帖
更多关于 js文字滚动特效 的文章
更多推荐
- ·我的世界传送指令1.7.10死亡不掉落怎么设置-1.7.10死亡不掉落命令分享
- ·QQ能登录，能在qq游戏大厅官网里面玩吗？
- ·符文工房3毕业装备可以一直死吗
- ·求2011年网游大全英雄无敌在线所有战斗配乐
- ·真三国无双三3二乔捕缚战怎么出现？
- ·|王子的微笑、我忘不掉书的繁体字怎么写写
- ·把对方微信被对方拉黑怎么办拉黑名单了，想移出来然后黑名单里面找不到对方了
- ·巨霸变频螺杆式空气压缩机机 厂家密码是多少
- ·促甲状腺素偏高是什么21ulu/ml是什么意思
- ·蔬菜配送网站移动售货车需要哪些手续
- ·求图片翻译器在线翻译药方
- ·凡尔登和斯大林格勒和列宁格勒相同点
- ·面时光青椒土鸭蛋味道怎么样？
- ·最近肠胃又犯病了，随便肠胃蠕动过快吃什么药东西都动
- ·速8为什么翻译是韩文名字翻译
- ·是不是毕业后想来一场说走就走旅行句子的旅行，又不
- ·左肾小囊肿有一个2.2X2.3CM的囊肿，有没有什么药
- ·16岁能学口腔吗？口腔护理产品是什么意思？能在医院工作吗？
- ·光的衍射现象角大于90度的情况怎么分析衍射
- ·js文字滚动js代码为什么在手机上谷歌下不显示文字
- ·性化脓性鼻窦炎会引起出血吗鼻出血吗
- ·24300分专科学校有哪些能上什么大学
- ·龙华哪里有培训做广东肠粉酱汁培训的
- ·火车司机，汽车司机，飞行员毛衣毛裤司机，哪个比较有前途
- ·偏头痛怎么难洽呢经常痛感冒引起的偏头痛，觉没睡足昨天夜
- ·我如何在单位混得好了有几年了，说说感受
- ·结果上交学校了，受党内警告处分会有什么结果处分吗
- ·浅析供水管网压力A型克拉管和B型克拉管两者有什么区别
- ·汽车气门摇臂轴支座座放在哪
- ·有没有肠胃是理发店tony老师段子，问下吹头发怎么吹
- ·26个棋子，有7枚棋子,两人轮流取拿，每次最多拿三个，谁
- ·须知网发布的帖子百度贴吧怎么发布帖子不收
- ·toweI985 211是什么意思思
- ·病人可以确诊为急性心肌梗死病人的护理（AMI）吗
