今天做项目遇到一个滚动的效果，本来打算用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. 安卓版微信自带浏览器和IE6浏览器ajax请求abort错误处理

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46419567 给页面元素绑定了一个click事件用来触发ajax请求.在安卓微信自 ...

  2. 关于Blog使用

    1.网易博客http://inowtofuture.blog.163.com/blog/#m=0 使用时间:2011年8月-2012年2月 记录内容:主要记录本科參加ACM期间在POJ(北京大学OJ) ...

  3. TS 函数解析

    ------------------------------------------------------------------------------------ 函数传参: //let myA ...

  4. python中各项目文件含义（新手可看）

    其他不用多说,这里主要阐述三个概念,包.模块.类 包我们可以看作一个包含__init__.py 和一系列.py 文件的文件夹,包含__init__.py这样做的目的是为了区别包和普通字符串,读者可以试 ...

  5. dll开发

    _declspec(dllexport) void fun() { }

  6. GPG加密windows中使用

    在Windows系统使用Gpg4win进行加密解密 2015-06-15 by u014076884 GPG,又称为GnuPG,全称是Gnu Private Guard,即GNU隐私卫士.GPG是以P ...

  7. pic16F1938

    1.中断自动保存寄存器:W.STATUS.BSR.FSR和PCLATH,而且如果中断中需要改变这些寄存器,在Bank31中修改这些寄存器的影子寄存器即可. 2.RAM有1024字节,分为N个bank, ...

  8. php截取字符串|php截取字符串前几位|php截取中文字符串

    转 截取字符串专题:php截取字符串函数,php 字符串长度,php截取字符串前几位 PHP截取中文字符串(mb_substr)和获取中文 => http://www.q3060.com/lis ...

  9. fdisk 添加逻辑分区

    [root@riyimei ~]# fdisk /dev/sdb WARNING: DOS-compatible mode is deprecated. It's strongly recommend ...

  10. python 面向对象 继承

    什么是继承 继承表达的是一种”是“的关系,比如人是动物 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 继承是基于抽象的结 ...