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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vue实现一个炫酷的日历组件
Oct 08 Javascript
Vue.js自定义指令学习使用详解
Oct 19 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
javascript常见用法总结
2014/05/22 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
JavaScript生成简单等差数列
2017/11/28 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Python hashlib模块用法实例分析
2018/06/12 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python做接口测试的必要性
2019/11/20 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
党员公开承诺事项
2014/03/25 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
签证工作证明模板
2015/06/15 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书