用javascript实现代替marquee的滚动字幕效果代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript实现代替marquee的滚动字幕效果代码

Javascript: 颜色变换像字符逐字输入的欢迎词; CSS 伪类实现的鼠标滑动图片链接; 百度用到的Js日历大家可以看看; CSS 渐变背景的6个演示代码; Jquery 弹出层插件实现代码; Javascript 模式实例观察者模式; [原创]javascript 指定区域内图片等比例缩放实现代码脚本之家整合版; javascript window对象属性整理; JavaScript弹簧振子超简洁版完全符合能量守恒,胡克定理; WEB页子窗口(showModalDialog和showModelessDialog)使用说明; 用JavaScript实现铁甲无敌奖门人 “开口中”猜数游戏; 理解 JavaScript 预解析; 理解JavaScript变量作用域更轻松; JavaScript的变量作用域深入理解; javascript写的一个链表实现代码; Js 打字效果逐一出现的文字; javascript 走马灯效果的链接提示; CSS 动态链接提示; JavaScript 事件的一些重要说明; JavaScript 三种不同位置代码的写法

No. « ‹ 266 267 268 269 › »

技术文章搜索

关键字

Javascript 中的用javascript实现代替marquee的滚动字幕效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 231 ::

收藏到网摘: n/a

JavaScript 入门·JavaScript 具有全范围的运算符 [原创]仿google adsense颜色选择器代码，从中易广告联盟程序提取

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了
之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西，你把数十行内容压缩到几行滚动的确帮助你压缩了排版空间，但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天？就以经典论坛页面上部“BlogBeta 数字引擎p4 3.0服务器只要6999元/年”广告文字右边的聚合文字滚动为例，你觉得这是一个很好的用户体验么？W3C的专家们难道还不如一群无知的小p孩考虑的周全？简直是笑话
第一种方法：用javascript模拟marquee的做法。
出处：网易游戏

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>热点新闻</title>
<style type="text/css">
</style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() { var str=marqueeContent[0]; document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); marqueeId++; marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() { var str=marqueeContent[marqueeId]; marqueeId++; if(marqueeId>=marqueeContent.length) marqueeId=0; if(document.getElementById("marqueeBox").childNodes.length==1) { var nextLine=document.createElement('DIV'); nextLine.innerHTML=str; document.getElementById("marqueeBox").appendChild(nextLine); } else { document.getElementById("marqueeBox").childNodes[0].innerHTML=str; document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]); document.getElementById("marqueeBox").scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() { document.getElementById("marqueeBox").scrollTop++; if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ clearInterval(marqueeInterval[1]); }
}
initMarquee();
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

个人观点：从web可用性角度上讲，我们在采用这段代码的同时要考虑到noscript环境下的可用性，建议将内容还是以下边代码的形式出现在页面中。如：
程序代码

复制代码代码如下:

<div id="newslist"> 
<ul> 
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a></li> 
<li><a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a></li> 
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a></li> 
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a></li> 
</ul> 
</div> 

然后用脚本去设置隐藏，将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。
第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。
原文作者：风动人

点击运行可以看到效果:

<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){ var o=document.getElementById('infozone');hscroll(o); window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}
function scrollup(o,d,c){ if(d==c){ var t=o.firstChild.cloneNode(true); o.removeChild(o.firstChild);o.appendChild(t); t.style.marginTop=o.firstChild.style.marginTop='0px'; hscroll(o); } else{ ch=false;var s=3,c=c+s,l=(c>=d?c-d:0); o.firstChild.style.marginTop=-c+l+'px'; window.setTimeout(function(){scrollup(o,d,c-l)},50); }
}
function hscroll(o){ var w1=o.firstChild.offsetWidth,w2=o.offsetWidth; if(w1<=w2)return; tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}
function hs(o,d,c,p){ c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px'; if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);} else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>
<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦 对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。
第三种是最精简的，代码非常少。
原文作者：cityvoice
HTML代码

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> #newslist{ background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0; } #contain li{ height:20px;line-height:20px;white-space:nowrap;overflow:hidden; }
</style> </HEAD> <BODY> <div id="newslist"> <ul id="contain"> <li><a href="http:/www.iwcn.net">温岚 - 屋顶(左右摆动)</a></li> <li><a href="http:/www.iwcn.net">范玮琪 - 那些花儿</a></li> <li><a href="http:/www.iwcn.net">张韶涵 - 娃娃</a></li> <li><a href="http:/www.iwcn.net">孙楠&韩红 - 美丽的神话</a></li> <li><a href="http:/www.iwcn.net">张信哲 - 白月光</a></li> </ul> </div>
<SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",3000);
</SCRIPT> </BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

个人观点：太短小精干了，如果你喜欢简单的话，这个也可以考虑的。

JavaScript 入门·JavaScript 具有全范围的运算符 [原创]仿google adsense颜色选择器代码，从中易广告联盟程序提取

Javascript 中的 用javascript实现代替marquee的滚动字幕效果代码

评论 (0) All

Javascript 中的用javascript实现代替marquee的滚动字幕效果代码