这篇文章主要介绍了 JS 与 html 结合使用 marquee 标签实现无缝滚动效果代码的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动。下面小编把实现代码分享到 phperz 平台,需要的朋友可以参考下,有 bug 欢迎提出,共同学习进步。
具体代码如下所示:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <HEAD>
- <TITLE>一行多列文字循环滚动带停顿-</TITLE>
- <meta name="keywords" content="网页特效" />
- <meta name="description" content="" />
- <META http-equiv=Content-Type content="text/html; charset=utf-8">
- <style type="text/CSS">
- ul {height:200px;
- padding-right: 0px;
- padding-left: 0px;
- padding-bottom: 0px;
- margin: 0px;
- padding-top: 0px
- }
- #announcement {
- width:300px;
- height:200px;
- background:url(img/menu_bg.gif) repeat;
- overflow: hidden;
- }
- #announcement div {
- border: #e6e6e6 1px solid;
- padding:0px 10px 0px 10px;
- overflow-y:hidden;
- line-height: 24px;
- height:100px;
- }
- #announcement li {
- font-size: 12px;
- float: left;
- list-style-type: none;
- margin-right: 20px;
- padding-left: 10px;
- background: url(img/arrow_right.gif) no-repeat 0px 50%;
- white-space: nowrap
- }
- #announcement a {
- text-decoration: none;
- }
- #announcement a:hover {
- text-decoration:underline;
- }
- </style>
- </HEAD>
- <BODY>
- <DIV id="announcement" onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);">
- <DIV id="scrbody">
- <ul>
- <li>
- <a href="#" target="_blank">jQuery 类似腾讯网的图片幻灯特效(可自动播放)</a>
- </li>
- <li>
- <a href="#/JS" target="_blank">VB版增强型Windows任务管理器</a>
- </li>
- <li>
- <a href="#/JS/texiao"target="_blank">JQuery Tip多风格链接提示框</a>
- </li>
- <li>
- <a href="#/JS/ad" target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a>
- </li>
- <li>
- <a href="#/html+css" target="_blank">++连连看游戏源码附外挂</a>
- </li>
- <li>
- <a href="#/" target="_blank">基于API的VB HOOK钩子拦截程序</a>
- </li>
- <li>
- <a href="#/" target="_blank">VB 操作系统的一些常用小技巧集</a>
- </li>
- <li>
- <a href="#/js" target="_blank">xTree 标准的web菜单树(树形菜单)</a>
- </li>
- </ul>
- </DIV>
- </DIV>
- <script type="text/javascript">
- function $(id)
- {
- return document.getElementById(id);
- }
- var anndelay = 3000;
- var anncount = 0;
- var annheight = 24;
- var annst = 0;
- function announcementScroll()
- {
- if( ! annst)
- {
- $('scrbody').innerHTML += '<br style="clear: both" />' +
- $('scrbody').innerHTML;
- $('scrbody').scrollTop = 0;
- if($('scrbody').scrollHeight > annheight * 3)
- {
- annst = setTimeout('announcementScroll()', anndelay);
- }
- else
- {
- $('announcement').onmouseover = $('announcement').onmouseout = null;
- }
- return;
- }
- if(anncount == annheight)
- {
- if($('scrbody').scrollHeight - annheight <= $('scrbody').scrollTop)
- {
- $('scrbody').scrollTop = $('scrbody').scrollHeight / 2 - annheight;
- }
- anncount = 0;
- annst = setTimeout('announcementScroll()', anndelay);
- }
- else
- {
- $('scrbody').scrollTop ++ ;
- anncount ++ ;
- annst = setTimeout('announcementScroll()', 10);
- }
- }
- announcementScroll();
- </script>
- </BODY>
- </HTML>
以上所述是小编给大家介绍的 JS 与 HTML 结合使用 marquee 标签实现无缝滚动效果代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0303/264443.html