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

2016-02-19 09:57 77 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的用javascript代替marquee的滚动字幕效果代码,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
个人观点:从web可用性角度上讲,我们在采用这段代码的同时要考虑到noscript环境下的可用性,建议将内容还是以下边代码的形式出现在页面中。如:
代码如下:

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

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
个人观点:从xhtml的语义化的角度看,页面内容中滥用div标签现象比较严重,可改成ul/li形式。

第三种是最精简的,代码非常少。
原文作者:cityvoice

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
个人观点:太短小精干了,如果你喜欢简单的话,这个也可以考虑的。 

来源:http://www.tulaoshi.com/n/20160219/1592783.html

延伸阅读
标签: Web开发
滚动字幕会让很多人感到兴奋,特别是第一次使用滚动字幕时,会爱不释手。现在做一个详细的方案,让你更全面地了解一下。 滚动字幕在FrontPage的组件里有,但是FrontPage这个软件只能支持单行文字,一出现多行文字它就无能为力了,而且它只能支持一行滚动!(如果出现只能滚动一行的情况,解决办法是把这段代码嵌入到JavaScript的documen...
标签: Web开发
在控制台中输入  db.drawCircle([50,50],20,"black");  db.drawLine([5,5],[36,44],"red");  可以看到效果  代码如下: body style="margin:0px;"  /body  script      function DrawingBoard(width,height,size)      {   &nb...
标签: Web开发
程序代码 !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=utf-8" / meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" / title滚动新闻类...
标签: Web开发
新闻一 我是打头的 我向上运动 我向上运动 我向上运动 新闻二 我是打头的 我向上运动 我向上运动 我向上运动 新闻三 我是打头的 我向上运动 我向上运动
标签: Web开发
title标题/title input type="button" name="Submit" onClick='copyToClipBoard()' value="复制专题地址,传给QQ/MSN上的好友"  script language="javascript"    function copyToClipBoard(){     var clipBoardContent="";     clipBoa...

经验教程

373

收藏

97
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部