走马观花 滚动效果

原创 2007年09月18日 10:19:00

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1"
                                style="width: 233px; height: 322px;"></marquee> 

 

由于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">
<!--
body {
 margin: 0px;
 font-size: 12px;
 color: #938C43;
 line-height: 150%;
 text-align:center;
}
a:link{color: #9D943A;font-size:12px;}
a:hover{color: #FF3300;font-size:12px;}
a:visited{color: #9D943A;font-size:12px;}
a.red:link{color: #ff0000;font-size:12px;}
a.red:hover{color: #ff0000;font-size:12px;}
a.red:visited{color: #ff0000;font-size:12px;}
#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
-->
</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>

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


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

TextSwitcher实现文字上下翻牌效果

我们知道TextView是最常用来显示文字的组件,那么加入有一系列的内容,需要逐条的上下滚动播出,这样的效果就需要TextSwitcher来帮忙了。加入布局中已经存在一个TextSwitcher元素,...
  • bdmh
  • bdmh
  • 2016年03月16日 13:13
  • 4803

数字滚动效果

转载请注明作者AndroidMsky及原文链接 http://blog.csdn.net/androidmsky/article/details/53009886 本文Github代码链接...
  • a214024475
  • a214024475
  • 2017年01月12日 17:52
  • 778

视差滚动效果

视差滚动
  • DeepLies
  • DeepLies
  • 2017年08月03日 20:13
  • 497

视差滚动原理及实现

作为一种优雅酷炫的页面展示的方式,视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱,优设的2014年网页设计趋势中依然能够看到它的影子,所以我们不得不来好好研究下视差滚动...
  • chenlycly
  • chenlycly
  • 2014年05月05日 14:19
  • 15153

页面滚动视差效果的实现

0x01今天在http://materializecss.com/发现一个视差滚动的例子,想自己实现一下视差效果。打开例子0x02思路首先呢,我们可以选择监听scroll和mousewheel事件,说...
  • larry011
  • larry011
  • 2016年02月05日 14:44
  • 591

Javascript实现列表中列的滚动效果

经常在访问网页的时候,会发现有那种列表的滚动展示新闻或者网站消息的动态列表栏。 列表滚动效果 *{ padding:0px; margin:0px; ...
  • qq_33220449
  • qq_33220449
  • 2016年08月06日 21:33
  • 681

JQuery实现数字滚动增加的效果

转自:http://www.gbtags.com/gb/share/6207.htm 因为项目要求,要做一个数字滚动增加的效果。在网上没有找到好的插件,所以就自己做了一个,供大家参考。 先来看一下...
  • chelen_jak
  • chelen_jak
  • 2015年08月28日 08:32
  • 6650

iOS cocos2d 实现RollNumber(数字滚动效果)控件效果源码

开发人员:Jason's.Alex   QQ:531401335 csdn博客:http://blog.csdn.net/RuShrooM // // UiNumRoll...
  • RuShrooM
  • RuShrooM
  • 2013年02月28日 18:49
  • 4510

Axure8 实现移动端页面上下滑动效果

目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的,...
  • Amydom
  • Amydom
  • 2017年01月13日 16:17
  • 15184

html5实现无缝滚动的效果

在开发中我们经常会看到这样的应用场景。无缝滚动。就是几张图循环播放。图就不上了 ,不会制作gif。 直接上代码,避免以后重复造车轮。 走马灯效果 ...
  • qingmulang
  • qingmulang
  • 2016年11月15日 17:11
  • 1820
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:走马观花 滚动效果
举报原因:
原因补充:

(最多只允许输入30个字)