网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JS与HTML结合使用marquee标签实现无缝滚动效果代码
内容
    这篇文章主要介绍了JS与HTML结合使用marquee标签实现无缝滚动效果代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    具体代码如下所示：
    <!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 />' +
    $('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标签实现无缝滚动效果代码，希望对大家有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 11:38:03