用javascript实现代替marquee的滚动字幕效果代码_marquee标签被放弃了吗,javascriptmarquee资源-CSDN文库

53 浏览量 2020-12-10 20:12:28 上传评论收藏 66KB PDF 举报

资源详情

资源评论

资源推荐

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

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了

之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西，你把数十行内容压缩到几行滚动的确帮助你压缩了排版

空间，但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天？就以经典论坛页面上

部“BlogBeta 数字引擎p4 3.0服务器只要6999元/年”广告文字右边的聚合文字滚动为例，你觉得这是一个很好的用户体验

么？W3C的专家们难道还不如一群无知的小p孩考虑的周全？简直是笑话

第一种方法：用javascript模拟marquee的做法。

出处：网易游戏

滚动新闻滚动新闻

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

个人观点：从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环境下也能正常看到内容列表。

第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。

原文作者：风动人

<br>

<b><br>

<b><br>

<title> SCROLL </title>

</b></b>

#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}

#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}

温岚 – 屋顶(周杰伦对唱版)范玮琪 – 那些花儿张韶涵 – 娃娃孙楠&韩红 – 美丽的神话

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。

第三种是最精简的，代码非常少。

原文作者：cityvoice

HTML代码

#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;

}

温岚 – 屋顶(左右摆动)

范玮琪 – 那些花儿

张韶涵 – 娃娃

孙楠&韩红 – 美丽的神话

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

内容反馈

weixin_38624315

粉丝: 7
资源: 919

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip