今天做项目遇到一个滚动的效果，本来打算用marquee做的，因为它是html自带的标签，写起来简单，但是有一个问题就是marquee不能实现无缝滚动，上网找了一些方法，发现marquee可以实现无缝，但要在脑残的IE环境下。

没办法，为了达到要求，自己又从网上找了一些相关的代码加以修改，最终实现了效果，现在把代码分享给大家，有问题还请大家多指正。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文字列表无缝向上滚动JavaScript代码</title>

<style type="text/css">

#xunhuan{

overflow:hidden; /*溢出的部分不显示*/

height:100px;

}

#xunhuan1,#xunhuan2{height: auto;}

</style>

</head>

<body>

       <div id="xunhuan">

                   <div id="xunhuan1">

                     <ul>

                         <li>这是第1条</li>

                         <li>这是第2条</li>

                         <li>这是第3条</li>

                         <li>这是第4条</li>

                         <li>这是第5条</li>

                         <li>这是第6条</li>

                     </ul>

                 </div>

                 <div id="xunhuan2"></div>

            </div>

<script>

var speed=10; //数字越大速度越慢

var tab=document.getElementById("xunhuan");

var tab1=document.getElementById("xunhuan1");

var tab2=document.getElementById("xunhuan2");

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

</script>

</body>

</html>

这里面需要注意的是，要加上我在style里面写的样式，另外两个注意点就是：里面的li不能float，最外围的xunhuan的高度要小于里面元素的高度，以足够它循环滚动。

例子是向上滚动的效果，如果想要向左滚动，做相应的改动即可。

JS实现文字图片无缝滚动的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  3. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. angular实现的文字上下无缝滚动

    最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...

  6. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  7. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  9. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

随机推荐

  1. C#一个托付的样例

    C#中的函数能够被声明的一个托付所调用. 函数为静态方法.和托付声明的參数返回值要一致.   class Program { delegate float MathOperationDelegate( ...

  2. （转）<![CDATA[]]>和转义字符

    被<![CDATA[]]>这个标记所包含的内容将表示为纯文本,比如<![CDATA[<]]>表示文本内容“<”. 此标记用于xml文档中,我们先来看看使用转义符的情 ...

  3. HDUOj 看病要排队 优先队列的使用 题目1873

    STL优先队列的具体描写叙述 http://blog.csdn.net/yueloveme/article/details/47106639 题目地址:http://acm.hdu.edu.cn/s ...

  4. Android BLE与终端通信（三）——client与服务端通信过程以及实现数据通信

    Android BLE与终端通信(三)--client与服务端通信过程以及实现数据通信 前面的终究仅仅是小知识点.上不了台面,也仅仅能算是起到一个科普的作用.而同步到实际的开发上去,今天就来延续前两篇 ...

  5. 【Java】【Flume】Flume-NG启动过程源代码分析（一）

    从bin/flume 这个shell脚本能够看到Flume的起始于org.apache.flume.node.Application类,这是flume的main函数所在. main方法首先会先解析sh ...

  6. 今天犯的一个错误，导致method GET must not have a request body

    事件经过: 1.在本地机器运行完全正常的程序,手动人工发包到测试环境上,后台日志频频报method GET must not have a request body. 2.使用postman发送pos ...

  7. eclipse启动错误：An internal error occurred during: "reload maven project".

    解决方案一: 简单粗暴!直接删除E:\eclipseWorkspace\.metadata目录!然后再单个导入eclipseWorkspace中的项目. 解决方案二: 打开这个配置文件:E:\ecli ...

  8. 持久层框架Clone

    Clone框架:http://www.52chloe.com/Wiki/Document/3324802610879266816 Clone框架支持多种数据库,我用的是sql server 基本查询: ...

  9. Codeforces 986A. Fair（对物品bfs暴力求解）

    解题思路: 1.对物品i bfs,更新每个小镇j获得每个物品i的最短距离. 2.时间复杂度o(n*k),满足2s的要求. 代码: #include <iostream> #include ...

  10. Servlet学习(二)——ServletContext对象

    1.什么是ServletContext对象 ServletContext代表是一个web应用的环境(上下文)对象,ServletContext对象内部封装是该web应用的信息,一个web应用只有一个S ...