走马观花滚动效果

最新推荐文章于 2024-10-30 19:10:39 发布

lmllouk

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量832

点赞数

分类专栏：网页特效文章标签： function javascript html xhtml div generator

本文链接：https://blog.csdn.net/lmllouk/article/details/1789213

版权

网页特效专栏收录该内容

0 篇文章 0 订阅

订阅专栏

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了，至于不明白为什么不直接用marquee标签的朋友，不妨先阅读一下这篇文章。
第一种方法：用javascript模拟marquee的做法。
HTML代码

<!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" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="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>

个人观点：从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代码

<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.οnlοad=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);
}

<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>

个人观点：从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>