今天做项目遇到一个滚动的效果，本来打算用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. Android UI布局之TableLayout

    从字面上了解TableLayout是一种表格式的布局.这样的布局会把包括的元素以行和列的形式进行排列.表格的列数为每一行的最大列数.当然表格里边的单元格是能够为空的. 实例:LayoutDemo 执行 ...

  2. 第一个python作业题目以及代码

    1. 编写程序,用户输入一个三位以上的整数,输出其百位以上的数字.例如用户输入1234,则程序输出12.(提示:使用整除运算.) x=input("请输入一个三位以上的数字:") ...

  3. 好莱坞原则—Spring的IOC容器

    IOC容器的概念,之前在学习SSH的时候,就有接触过.但那时候也仅仅是知道这么个概念,认为它非常难理解.事实上并非它难理解,而是我并没有停下来好好对它总结梳理过. IOC(Inversion of C ...

  4. Vmware Workstation及Centos6.8 的安装

    转自:http://www.mamicode.com/info-detail-1462939.html 一.什么是Vmware Workstation Vmware Workstation是Vmwar ...

  5. GetExecutingAssembly() 和 GetCallingAssembly() 的区别

    在TCX_1710项目代码的启动项目根目录路径下的Global.asax.cs配置文件中的MVCApplication类中的Application_Start()方法中,配置了项目启动时要加载的项目信 ...

  6. RGB颜色值与十六进制颜色码转换工具

    RGB颜色值转换成十六进制颜色码:      十六进制颜色码转换成RGB颜色值:     颜色码对照表 颜色 英文代码 形象描述 十六进制 RGB LightPink 浅粉红 #FFB6C1 255, ...

  7. php报错权限设置

    <?php //禁用错误报告 error_reporting(0); //报告运行时错误 error_reporting(E_ERROR | E_WARNING | E_PARSE); //报告 ...

  8. RocketMQ学习笔记（1）----RocketMQ的简介

    1. 什么是RocketMQ? 是一个队列模型的消息中间件,具有高性能.高可靠.高实时.分布式特点. Producer.Consumer.队列都可以分布式.  Producer 吐一些队列轮流収送消息 ...

  9. servlet中Cookie的编码问题

    a.什么是Cookie的编码问题?      Cookie只能存放合法的ascii字符,如果是非asicc字符(比如中文),     需要转换成合法的ascii字符的形式.  b.如何处理?     ...

  10. Mojo C++ Bindings API

    This document is a subset of the Mojo documentation. Contents Overview Getting Started Interfaces Ba ...