今天做项目遇到一个滚动的效果，本来打算用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. 在MAC下怎样用SSH连接远程LINUXserver

    首页,打开MAC的命令终端,检查是不是用root用的登录的,假设不是的话请输入命令:sudo -i切换到root. 然后,输入:ssh ip地址,假设主机存在的话会提示你输入password,输入正确 ...

  2. 带你认识 MySQL 之 MySQL 体系结构

    序 近期一直在忙项目,各种加班加点,项目上线.渐渐的没有了学习的时间.这不,刚这几天才干抽出点时间.忙里偷闲,正在看一本数据库的书籍.相信非常多小伙伴们也都看过 - - <MySQL 技术内幕: ...

  3. STM32F407VG (四)时钟配置

    1.STM32 F407VG 的starup_stm32f40_41xxx.s的例如以下位置调用 IMPORT SystemInit,之后调用main函数,所以 进入main函数时候就已经自己主动完毕 ...

  4. 一个人的旅行 HDU杭电2066【dijkstra算法 || SPFA】

    pid=2066">http://acm.hdu.edu.cn/showproblem.php? pid=2066 Problem Description 尽管草儿是个路痴(就是在杭电 ...

  5. NOIP2017提高组模拟赛 9 （总结）

    NOIP2017提高组模拟赛 9 (总结) 第一题 星星 天空中有N(1≤N≤400)颗星,每颗星有一个唯一的坐标(x,y),(1≤x,y ≤N).请计算可以覆盖至少K(1≤K≤N)颗星的矩形的最小面 ...

  6. Qt开发环境的搭建

    首先讲讲为什么要用Qt这个东东吧!用了以后才知道,这门语言真的很不错,我权当把它当成了类库来用,Linux本身的C语言编程是很烦的,比如说串口编程,虽说C编程也不难,但是使用Qt这种封装的类库来操作的 ...

  7. java监听多个组件

    import java.awt.Color; import java.awt.FlowLayout; import java.awt.event.*; import javax.swing.*; pu ...

  8. APACHE KYLIN™ 概览(分布式分析引擎)

    Apache Kylin™是一个开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区.它能 ...

  9. 从SQL注入谈数据访问层

    什么是SQL注入? SQL注入就是应用程序的开发人员未预期的吧SQL语句传入到应用程序的过程,如果直接使用用户输入的值来构建SQL语句的应用程序是很可能会受到SQL注入攻击的.特别是基于浏览器的网络应 ...

  10. RocketMQ学习笔记（9）----RocketMQ的Producer 顺序消息

    1. 顺序消息原理图 2. 什么是顺序消息? 消费消息的顺序要求同发送消息的顺序一致,在RocketMQ中,主要指的是局部顺序,即一类消息为满足顺序性,必须Producer单线程顺序发送,并且发送给到 ...