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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
来自qq的javascript面试题
Jul 24 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Bootstrap table使用方法总结
May 10 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php实现搜索类封装示例
2016/03/31 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
新春寄语大全
2014/04/09 职场文书
银行给客户的感谢信
2015/01/23 职场文书
物流业务员岗位职责
2015/04/03 职场文书
农业项目合作意向书
2015/05/08 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android