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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
js实现上传图片到服务器
Apr 11 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中Collection 类的设计
2013/06/21 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python利用装饰器进行运算的实例分析
2015/08/04 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python多线程并发及测试框架案例
2019/10/15 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
教师简历自我评价
2014/02/03 职场文书
教学改革实施方案
2014/03/31 职场文书
公司户外活动总结
2014/07/04 职场文书
租房协议书范文
2014/08/20 职场文书
小学同学聚会感言
2015/07/30 职场文书