`
千秋霸业
  • 浏览: 16579 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

javascript实现走马灯效果[无缝连接、循环滚动、无空白maquee]

JavaScriptIEFirefoxBlog 
阅读更多
以下代码在IE6、Firefox+Win2k环境下测试通过

一、向上的无缝循环滚动


程序代码： [ 复制代码到剪贴板 ]


<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
    <div id="demo1">
        <!-- 定义内容-->
        <img src="images/logo_1.gif">
        <img src="images/logo/flashempire.gif">
        <img src="images/logo.gif">
        <img src="images/logo/5dmedia.gif">
        <img src="images/logo/macromedia.gif">
        <img src="images/logo/sucaiw.gif">
        <img src="images/logo/blueieda.gif">
        <img src="images/logo/htmlcn.gif">
        <img src="images/logo/fwcn.gif">
    </div>
    <div id="demo2"></div>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //滚动速度值，值越大速度越慢
demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
        demo.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
    else{
        demo.scrollTop++
    }
}
var MyMar = setInterval(Marquee,speed);        //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器
-->
</script>


二、向下的无缝循环滚动

程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
    <div id="demo1">
        <!-- 定义内容-->
        <img src="images/logo_1.gif">
        <img src="images/logo/flashempire.gif">
        <img src="images/logo.gif">
        <img src="images/logo/5dmedia.gif">
        <img src="images/logo/macromedia.gif">
        <img src="images/logo/sucaiw.gif">
        <img src="images/logo/blueieda.gif">
        <img src="images/logo/htmlcn.gif">
        <img src="images/logo/fwcn.gif">
    </div>
    <div id="demo2"></div>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML;
demo.scrollTop = demo.scrollHeight;
function Marquee(){
    if(demo1.offsetTop-demo.scrollTop>=0)
        demo.scrollTop+=demo2.offsetHeight
    else{
        demo.scrollTop--
    }
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>


三、向左的无缝循环滚动

程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
      <td id="demo2">&nbsp;</td>
    </tr>
</table>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML
function Marquee(){
    if(demo2.offsetWidth-demo.scrollLeft<=0)
        demo.scrollLeft-=demo1.offsetWidth
    else{
        demo.scrollLeft++
    }
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>


四、向右的无缝循环滚动

程序代码： [ 复制代码到剪贴板 ]
<!-- 指向链接图片的URL -->
<base href="http://www.it365cn.com">
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
      <td id="demo2">&nbsp;</td>
    </tr>
</table>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML;
demo.scrollLeft = demo.scrollWidth;
function Marquee(){
    if(demo.scrollLeft<=0)
        demo.scrollLeft+=demo2.offsetWidth
    else{
        demo.scrollLeft--
    }
}
var MyMar = setInterval(Marquee,speed)
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>

来源：http://thomaslee007.javaeye.com/blog/204708

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

上下綜合實例

<a href="#" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed" >^^^^^^^^^^^^^^^^^^^^^^^^</a>
<div id=demo style="overflow:hidden;height:421px;width:190px;">
<div id="demo1">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td height="421" align="center">
    <table width="95%" border="0" cellspacing="7" cellpadding="0">
    <tr>
     <td align="center"><a href="main.php?action=introduce_view&id=1"><img src="http://qz/upload/2008/12/20081216101239_small.jpg" width="180" height="73" border="0" /></a></td>
    </tr>
    <tr>
     <td align="center"><a href="main.php?action=introduce_view&id=2"><img src="http://qz/upload/2008/12/20081216101251_small.jpg" width="180" height="73" border="0" /></a></td>
    </tr>
    <tr>
     <td align="center"><a href="main.php?action=introduce_view&id=1"><img src="http://qz/upload/2008/12/20081216101239_small.jpg" width="180" height="73" border="0" /></a></td>
    </tr>
    <tr>
     <td align="center"><a href="main.php?action=introduce_view&id=2"><img src="http://qz/upload/2008/12/20081216101251_small.jpg" width="180" height="73" border="0" /></a></td>
    </tr>
   </table></td>
   </tr>
   </table>
</div>
   <div id="demo2"></div>
</div>
<a href="#" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)" >ⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤ</a>
<script>

var speed=1 ;
var addspeed=1;
var dafault_addspeed=1;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");

demo2.innerHTML=demo1.innerHTML ;
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight;
else{
   demo.scrollTop=demo.scrollTop+addspeed;
}
}
function rightAddSpeed(){
if(demo1.offsetTop-demo.scrollTop>=0)
        demo.scrollTop+=demo2.offsetHeight
    else{
        demo.scrollTop-=10;
    }
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>



=================================================

+++++++++++++++左右綜合实例++++++++++++++

<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td height="153" valign="top" background="images/pro_centerbg2.jpg"><table width="1002" height="140" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="106" align="center" valign="top"><img src="images/jiantou_left.jpg" width="60" height="88" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed"/></td>
        <td width="790" valign="top">
   <!----------------------------小圖展示區------------------------------------>
   <div id=demo style="overflow:hidden;height:100px;width:790px;">
   <table>
    <tr>
     <td id="demo1" valign="top">
      <table width="790" height="140" border="0" cellpadding="0" cellspacing="0">
       <tr>
       <td width="131" align="center" valign="top" >
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest1.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>
       </td>
       <td width="131" align="center" valign="top" >
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest2.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>  
       </td>
       <td width="131" align="center" valign="top">
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest3.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>  
       </td>
       <td width="131" align="center" valign="top">
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest4.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>  
       </td>
       <td width="131" align="center" valign="top">
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest5.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>  
       </td>
       <td width="135" align="center" valign="top">
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest6.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>  
       </td>
       <td width="135" align="center" valign="top">
        <DIV class="example" style="width:130px; ">
        <!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]-->
        <DIV class="bd" style="width:110px; height:74px;">
         <img src="images/protest6.jpg" width="110" height="74" /></DIV>
        <!--[if lte IE 6.5]></v:rect><![endif]-->
        </DIV>  
       </td>
       </tr>
      </table>
     </td>
     <td valign="top" id="demo2"></td>
    </tr>
   </table>
   </div>
 
   <!----------------------------小圖展示區end------------------------------------>
   </td>
        <td width="106" align="center" valign="top"><img src="images/jiantou_right.jpg" width="60" height="88" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)"/></td>
      </tr>
    </table></td>
</tr>
</table>
<script>
var speed=1
var addspeed=1;
var dafault_addspeed=1;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
else{
   demo.scrollLeft=demo.scrollLeft+addspeed
}
}
function rightAddSpeed(){
if(demo2.offsetWidth-demo.scrollLeft>0)
   demo.scrollLeft+=demo1.offsetWidth
else{
   demo.scrollLeft=demo.scrollLeft-10
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html借助marquee实现文字左右滚动

    5. 判断当滚动条到达指定内容宽度时，将内容追加到元素的末尾，实现循环滚动。 6. 通过setInterval函数设置scroll函数定时执行，以达到连续滚动的效果。 在实际项目中，推荐使用第二种方法，因为其可定制性更高，...

    大数据共享交换平台数据可视化（动感炫酷数据可视化可演示DEMO源码）.zip

    通过研究源码，可以了解如何使用编程语言（如JavaScript、Python等）结合数据可视化库来创建复杂的可视化界面，以及如何实现数据的动态加载和交互功能。 5. 可演示特性：此DEMO源码是可演示的，意味着它可以作为一...

    html5+echarts全屏政务大数据共享交换平台可视化大屏幕展示模板

    ECharts是一个基于JavaScript的数据可视化库，它充分利用了HTML5的Canvas或SVG进行图表渲染。ECharts提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、K线图等，能够满足各种数据分析和展示需求。此外，...

    vue-marquee:这是vue专有的选取框组件，具有无限的上下轮播功能，可以端对端连接

    特征 这是vue专有的选取框组件，其特征是无限的上下旋转木马，将首尾相连。 用法 安装 npm i @ vue_modules / vue - marquee - straight 基本的 ...import TheMarquee from "@vue_modules/vue-marquee-straight" ;...

    数据库基础测验20241113.doc

    数据库基础测验20241113.doc

    微信小程序下拉选择组件

    微信小程序下拉选择组件

    DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

    DICOM文件+DX放射平片—数字X射线图像DICOM测试文件，文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用，请勿用于非法用途。

    Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释

    <项目介绍> - 基于双流 Faster R-CNN 网络的 图像篡改检测 - 不懂运行，下载完可以私聊问，可远程教学 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------

    使用epf捕获没有CA证书的SSLTLS明文（LinuxAndroid内核支持amd64arm64）.zip

    c语言

    (源码)基于Arduino的天文数据库管理系统.zip

    # 基于Arduino的天文数据库管理系统 ## 项目简介 本项目是一个基于Arduino的天文数据库管理系统，旨在为Arduino设备提供一个完整的天文数据库，包括星星、星系、星团等天体数据。项目支持多种语言的星座名称，并提供了详细的天体信息，如赤道坐标、视星等。 ## 项目的主要特性和功能 星座目录包含88个星座，提供拉丁语、英语和法语的缩写和全名。 恒星目录包含494颗亮度达到4等的恒星。 梅西耶目录包含110个梅西耶天体。 NGC目录包含3993个NGC天体，亮度达到14等。 IC目录包含401个IC天体，亮度达到14等。 天体信息每个天体（不包括星座）提供名称、命名、相关星座、赤道坐标（J2000）和视星等信息。 恒星额外信息对于恒星，还提供每年在赤经和赤纬上的漂移以及视差。 ## 安装使用步骤 1. 安装库使用Arduino IDE的库管理器安装本项目的库。 2. 解压数据库将db.zip解压到SD卡中。

    (源码)基于JSP和SQL Server的维修管理系统.zip

    # 基于JSP和SQL Server的维修管理系统 ## 项目简介 本项目是一个基于JSP和SQL Server的维修管理系统，旨在提供一个高效、便捷的维修管理解决方案。系统涵盖了从维修订单的创建、管理到配件的录入、更新等多个功能模块，适用于各类维修服务行业。 ## 项目的主要特性和功能 1. 用户管理 管理员和客户的注册与登录。 管理员信息的管理与更新。 客户信息的创建、查询与更新。 2. 维修订单管理 维修订单的创建、查询与更新。 维修回执单的创建与管理。 3. 配件管理 配件信息的录入与更新。 配件库存的管理与查询。 4. 评价与反馈 客户对维修服务的评价记录。 系统反馈信息的收集与管理。 5. 数据加密与安全 使用MD5加密算法对用户密码进行加密存储。 通过过滤器实现登录验证，确保系统安全。 ## 安装使用步骤

    devecostudio-windows-3.1.0.501.zip

    HUAWEI DevEco Studio，以下简称DevEco Studio）是基于IntelliJ IDEA Community开源版本打造，为运行在HarmonyOS和OpenHarmony系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。 作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEco Studio还具有如下特点： - 高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。更多详细信息，请参考[编辑器使用技巧] - 低代码可视化开发：丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，可快速预览效果

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    springboot小徐影城管理系统(代码+数据库+LW)

    随着现在网络的快速发展，网上管理系统也逐渐快速发展起来，网上管理模式很快融入到了许多生活之中，随之就产生了“小徐影城管理系统”，这样就让小徐影城管理系统更加方便简单。 对于本小徐影城管理系统的设计来说，系统开发主要是采用java语言技术，在整个系统的设计中应用MySQL数据库来完成数据存储，具体根据小徐影城管理系统的现状来进行开发的，具体根据现实的需求来实现小徐影城管理系统网络化的管理，各类信息有序地进行存储，进入小徐影城管理系统页面之后，方可开始操作主控界面，主要功能包括管理员：首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订单管理，用户前台；首页、电影信息、电影资讯、个人中心、后台管理、在线客服等功能。 本论文主要讲述了小徐影城管理系统开发背景，该系统它主要是对需求分析和功能需求做了介绍，并且对系统做了详细的测试和总结。具体从业务流程、数据库设计和系统结构等多方面的问题。望能利用先进的计算机技术和网络技术来改变目前的小徐影城管理系统状况，提高管理效率。

    C++与Matlab实现SIFT特征提取算法+项目源码+文档说明+代码注释

    <项目介绍> - SIFT特征提取算法C++与Matlab实现 - 不懂运行，下载完可以私聊问，可远程教学 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------

    （1991-2024年）国家自然、社科基金部分名单（含部分标书）（最新！！！）

    数据介绍 数据名称：国家自然、社科基金部分名单 数据年份：1991-2024年 样本数量：10万+ 数据格式：PDF、excel

    卓晴-信号与系统课件.pdf

    卓晴

    as-bundled-clients

    as-bundled-clients

    学习时最后的资料包括面试等信息

    学习时最后的资料包括面试等信息

    (源码)基于Spring Boot和Ant Design的雨选课系统.zip

    # 基于Spring Boot和Ant Design的雨选课系统 ## 项目简介 雨选课系统是一个基于Spring Boot和Ant Design框架构建的前后端分离的选课系统。该系统实现了学生选课、成绩查询、教师成绩修改、课程编辑、课程新增等功能。登录信息使用Redis存储，并支持课程图片的上传功能。 ## 项目的主要特性和功能 1. 用户登录与权限管理 学生、教师和管理员分别有不同的登录权限。 登录信息使用Redis进行存储。 2. 课程管理 学生可以查看可选课程列表，并进行选课和退选操作。 教师可以查看自己教授的课程，并修改学生成绩。 管理员可以编辑和新增课程。 3. 成绩管理 学生可以查询自己的成绩。 教师可以修改学生的成绩。 4. 图片上传 支持课程图片的上传和展示。 5. 日志记录 系统记录请求和响应的日志信息，便于问题追踪和性能分析。

Magicbox
Global site tag (gtag.js) - Google Analytics