JS与HTML结合使用marquee标签实现无缝滚动效果代码


Posted in Javascript onJuly 05, 2016

最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动。下面小编把实现代码分享到三水点靠木平台,需要的朋友可以参考下,有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标签实现无缝滚动效果代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue 实现用户登录方式的切换功能
Apr 14 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 #Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 #Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 #Javascript
Bootstrap实现水平排列的表单
Jul 04 #Javascript
JSONP跨域请求实例详解
Jul 04 #Javascript
Bootstrap表单布局样式源代码
Jul 04 #Javascript
JS JSOP跨域请求实例详解
Jul 04 #Javascript
You might like
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
php use和include区别总结
2019/10/13 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
angular分页指令操作
2017/01/09 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
python下载文件记录黑名单的实现代码
2017/10/24 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python list运算操作代码实例解析
2020/01/20 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
国税会议欢迎词
2014/01/16 职场文书
二手车转让协议书
2015/01/29 职场文书
《灰雀》教学反思
2016/02/19 职场文书
JavaScript中reduce()的用法
2022/05/11 Javascript
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android