使用JavaScript实现marquee功能

最新推荐文章于 2019-08-07 16:00:59 发布
最新推荐文章于 2019-08-07 16:00:59 发布
阅读量396 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript IE ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jokes000/article/details/83803900
版权
Code:(for IE)

<body onLoad="scroll1()">
<script language=javascript>
var info = "abcdefg";
var seq1 = 0;
var seq2 = 0;
var space = 0;
var timeid = 0;
var timefunc = "scroll1()";

function scroll1() {
if(seq1 < info.length) {
seq1 += 1;
marquee1.innerText = info.substring(0,seq1);
timeid = setTimeout("scroll1()",200);
timefunc = "scroll1()";
} else {
seq1 = 0;
timeid = setTimeout("scroll2()",200);
timefunc = "scroll2()";
}
}

function scroll2() {
//alert("" + marquee1.offsetWidth + " " + div1.clientWidth);
if(marquee1.offsetWidth < div1.clientWidth) {
space += 1;
var strSpace = "";
for(var i=0; i<space; ++i) {
strSpace += " ";
}
marquee1.innerText = info + strSpace;
timeid = setTimeout("scroll2()",200);
timefunc = "scroll2()";
} else {
div1.style.textAlign = "left";
space = 0;
timeid = setTimeout("scroll3()",200);
timefunc = "scroll3()";
}
}

function scroll3() {
if(seq2 < info.length) {
seq2 += 1;
marquee1.innerText = info.substring(seq2,info.length);
timeid = setTimeout("scroll3()",200);
timefunc = "scroll3()";
} else {
div1.style.textAlign = "right";
seq2 = 0;
timeid = setTimeout("scroll1()",200);
timefunc = "scroll1()";
}
}

</script>
<div id=div1 style="POSITION:static; WIDTH:500px; TEXT-ALIGN:right">
<span id=marquee1 onMouseOver="clearTimeOut(timeid)"
onMouseOut="setTimeout(timefunc,200)">
</span>
</div>

</body>
jokes000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
marquee.js
05-29
marquee实现文字移动效果;js+div实现文字无缝移动效果
用Javascript来实现Marquee效果
07-01
用Javascript来实现Marquee效果
JS实现marquee滚动效果
thewebcode
04-02 458
前言 marquee标签是微软推出的一个增强html标签动画功能的标签，也是W3C不被推荐使用的标签，因为marquee标签存在两个缺点。 marquee标签的缺点 1、浏览器间存在兼容性问题（IE8下已经放弃对marquee的支持了，MARQUEE是微软自己创造出来的，现在火狐都支持了，它自己不干了）。 2、marquee滚动不是无缝连接循环滚动。 因此，推荐使用js代替mar...
Javascript 实现marquee功能
biosman的专栏
11-08 963
无标题文档 hello,world! this is a nother test var i=200; test(); function test() { document.getElementById("mytext").style.marginRight=i; i+=2; if(i>=1000) i=200;
javascript marquee
04-12
<table style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" cellSpacing=0 cellPadding=0 width=750 align=center border=0> <tr> <td width="30"> <a href="#" onClick="clickdiv()" id="aa">向左 </a> </td> <td> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff"> <table cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <tr> <td id=demo1 vAlign=top> <table width="1710" height="116" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="171" background="pic_bg.jpg"> <div align="center">内容一 </div> </td> <td width="171" background="pic_bg.jpg"> <div align="center">内容二 </div> </td> <td width="171" background="pic_bg.jpg"> <div align="center">内容三 </div> </td> <td width="171" background="pic_bg.jpg"> <div align="center">内容四 </div> </td> <td width="171" background="pic_bg.jpg"> <div align="center">内容五 </div> </td> <td width="171" background="pic_bg.jpg"> <div align="center">内容六 </div> </td> </tr> </table> </td> <td id=demo2 vAlign=top> </td> </tr> </table> </DIV> </td> <td width="30"> <a href="#" onClick="Rclickdiv()" id="mcc">向右 </a> </td> </tr> </table> <SCRIPT> var speed3=25//速度数值越大速度越慢 var t=false; var id="aa"; document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML function Marquee(){ if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft <=0) document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth else{ document.getElementById("demo").scrollLeft++ } t=false; } function RMarquee(){ if(document.getElementById("demo").scrollLeft <=0) document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth else{ document.getElementById("demo").scrollLeft-- } t=true; } function clickdiv(){ clearInterval(MyMar) Marquee(); } function Rclickdiv(){ clearInterval(MyMar) RMarquee(); } var MyMar=setInterval(Marquee,speed3) document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)} document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}} document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);} document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);} </SCRIPT> 一个简单的向左或向右移动的案例: <base href=" <a href="http://www.it365cn.com" target="_blank">http://www.it365cn.com </a>"> <div id=demo style=overflow:hidden;height:120;width:500;background:#214984;color:#ffffff> <table align=left cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top> <a href='images/logo_1.gif'> <img src="images/logo_1.gif"> </a> <!--后面的链接自己加上--> <img src="images/logo/flashempire.gif"> <img src="images/logo.gif"> <img src="images/logo/5dmedia.gif"> <img src="images/logo/macromedia.gif"> <img src="images/logo/sucaiw.gif"> <img src="images/logo/blueieda.gif"> <img src="images/logo/htmlcn.gif"> <img src="images/logo/fwcn.gif"> </td> <td id=demo2 valign=top> </td> </tr> </table> </div> <script> //向左滚动的效果 var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft <=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> <script>
Javascript实现Marquee的滚动功能
03-25
鄙人上传的此脚本（含Demo）是一个Marquee类，开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置，对从事网页前端开发的设计人员有很大的好处。需要注意的地方就是：table的width要大于外框的width(呵呵，...
javascript 模拟Marquee文字向左均匀滚动代码
10-29
以下是一个使用JavaScript实现的向左均匀滚动代码示例： ```html <!DOCTYPE html> <title>JavaScript文字向左滚动 #myMarquee { width: 350px; height: 22px; overflow: hidden; } var ...
用javascript代替marquee的滚动字幕效果代码
10-30
### 使用JavaScript实现Marquee滚动字幕效果 随着Web标准的发展与普及，许多早期HTML标签因为不符合现代Web设计规范而逐渐被淘汰或被边缘化，`<marquee>`标签就是其中之一。尽管`<marquee>`标签提供了方便快捷的...
JS与HTML结合使用marquee标签实现无缝滚动效果代码
10-22
但是，如果仍然需要实现类似的效果，我们可以使用JavaScript来模拟这个行为，同时增加更多的定制功能，比如无缝滚动。 在给定的代码片段中，我们看到HTML结构主要包含一个ID为`announcement`的`<div>`，内部有一个`...
javascript中关于marquee的使用问题
站在技术的顶端，才能看清脚下的路该通向何方--技术工程师之路！
10-25 908
看到javascript中关于marquee的使用问题就转载下： =================html框架=========                                                                                                 ================
js实现marquee标签
03-16
使用js实现了ie的marquee标签滚动功能， 　　使之能兼容FF,ie 并修正了纯中文横向滚动时的bug..
javascript js仿marquee标签的走马灯效果.zip
01-08
js仿marquee标签的走马灯效果
js div实现左右滚动 无缝接 ，比 marquee强
01-11
js div实现左右滚动 无缝接 ，比 marquee强
js-markov:一个JavaScript库可帮助您创建马尔可夫链
05-14
JS-马尔科夫 js-markov是一个JavaScript库，可让您创建功能强大而又简单的马尔可夫链。 介绍 什么是马尔可夫链？ 马尔可夫链是描述一系列可能事件的随机模型，其中每个事件的概率仅取决于先前事件中达到的状态。 -。 为什么创建js-markov ？ 我想让人们轻松制作马尔可夫链。 这样，它将使人们能够探索新的道路。 现场演示 可以在上看到js-markov的实时演示。 程式码范例 以下示例显示了js-markov的基本用法： // Create a new Markov Chain // By default, its type is text var markov = new Markov ( ) ; // Add some states markov . addStates ( [ 'Today is sunny' , 'Today is rainy'
通用不间断滚动JS封装类，代替Marquee
06-05
通用不间断滚动JS封装类，代替Marquee
javascript特效模拟marquee
落叶翩翩的CSDN博客
11-18 1157
var srl,con; window.onload=function(){ setTimeout(marquee,100); srl=document.getElementById("srl"); con=document.getElementById("content"); }; function marquee(){ log("con.offsetW
marquee
weixin_30881367的博客
11-03 127
前阵子要做无间断滚动，找了很久终于找到了阿米的眼泪写的方法，经raidl完善后非常好用，不敢藏私，拿出来和大家分享一下。当时是另存的，忘了原来的网址是什么了。下面介绍marquee 的终极用法。先看下 marquee 的html 属性<MARQUEE ALIGN="…" 　　behavior="…"　　BGCOLOR="…"　　DIRECTION="…"　　HEIGHT=...
javascript模拟marquee跑马灯效果
QTFYING的博客
08-07 882
javascript完美模拟marquee效果 随着html中的标签marquee不在被W3C作为标准采纳，在可遇见的未来也会慢慢的被各大浏览器抛弃，直至废弃，为什么被废弃呢，经过小雨我不辞辛苦的总结有以下几种原因： marquee这家伙是微软自己创造出来的，现在火狐都支持了，它自己不干了 marquee的效果，必须要前一次滚动完成之后，才会接着下一次，会留白很长一段时间，适合无限向上滚动，无限...
用javascript实现的marquee效果
河南商人网|http://www.hnsr.net
05-27 1154
           dffffffffffffffffdffffffffffffff          dffffffffffffffffdffffffffffffff          dffffffffffffffffdffffffffffffff          dffffffffffffffffdffffffffffffff          dffffffffffffffffdfff
使用CSS和JavaScript实现网页平滑滚动字幕技术探析
然而，由于`<marquee>`存在一些限制和浏览器兼容性问题，现代网页设计更倾向于使用CSS和JavaScript来实现更为灵活和可控的滚动效果。 CSS则负责网页的样式设计，包括字体、颜色、布局等方面。在创建滚动字幕时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值