代替marquee的滚动字幕效果代码

zoukankan html css js c++ java

代替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;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>

方法二：

<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;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>

方法三：

<!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;300px;
 }
 #contain{
 font-size:12px;overflow:hidden;list-style:none;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>

方法四：

<!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>
#test{
 font-size:14px;width:100%;font-family:楷体_GB2312;color:lime;
 filter:progid:DXImageTransform.Microsoft.Glow(color=red, strength=4);
 }
#oDiv{position:absolute;width:340px;height:40px;background-color:black;left:320;top:222;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=pink);}
</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY onkeydown="move()">
<div id="oDiv"> <marquee behavior="alternate">从此图中可明显看出新手上路对道路是否顺畅影响很大。
</marquee></div>

 
<center>
<table width="179" height="178" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="179"><marquee direction="up" width="279" height="150" scrollamount="1" scrolldelay="1" onMouseOver="stop()" onMouseOut="start()">
乔答摩这一想就是几十年。王太子身份自然吸引眼球，慢慢来了许多信徒，饿了就由乔答摩带领集体讨饭。王太子上门讨饭,谁敢不给?即使不怕老国王给你穿小鞋,万一王太子一朝回心转意重回王宫,还不让你吃不了兜着走?因此,自然不愁讨不到吃的.于是,许多好吃懒做的叫花子，也过来把乔答摩当成了丐帮帮主，跟在后面讨吃的，规矩一些的吃饱了就呆头木脑的坐在一起痴想，不规矩的就在下面嬉笑玩笑,饿了就集体出去讨饭，队伍居然浩浩荡荡起来。渐渐国内种地的日少，呆坐讨吃的日多，国势日衰，外侮日甚。乔答摩之父净饭王已年老体衰，见状心焦如焚。劝他赶快回宫理事。乔答摩却不慌不忙开出一列天神天将名单来，说这些天神天将届时助父护国，将外兵迎头痛剿。到底释迦牟尼列出了哪些天神，属于两人谈话的高度机密，外人自然无从知晓，再加上后来这些天神都没出来现身，更无法考证。但据佛经《仁王护国经》说，凡是信奉佛法的国度，佛会派五位大力菩萨前来保护。这五大力菩萨是：手持千宝相轮的金刚吼菩萨、手持金轮灯的龙王吼菩萨、手持金刚杵的无畏十力吼菩萨，另外还有雷电吼菩萨和无量吼菩萨。真是有名有姓，有根有据。 
</marquee></td>
 </tr>
</table>
<table width="179" height="178" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="179"><marquee width="179" height="150" scrollamount="1" scrolldelay="1" onMouseOver="stop()" onMouseOut="start()">
<div id="test">临渊羡鱼，不如退而结网。</div>
 </marquee></td>
 </tr>
</table>
 
<marquee width="220px" behavior="alternate">今天的处境是做过无数选择后的结果。</marquee>
 
<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">
/*
Shake image script (onMouseover)-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
<img src="http://bbs.blueidea.com/images/blue/smilies/eek.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

查看全文

相关阅读:
02 re模块
 24 内置模块re 正则表达式
 pickle 模块
 json模块
 命名元组
 os模块
 24 内置函数命名元组(namedtuple) ,os ,sys,序列化,pickle,json
functools
ccc 音乐播放
 ccc prefab

原文地址：https://www.cnblogs.com/Excellent/p/966221.html