今天做项目遇到一个滚动的效果，本来打算用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. [Chromium]怎样安全的使用PostTask

    PostTask參数决策树 怎样传递绑定的对象 官方的解释总是最权威.有疑问看这里或者直接看代码中的说明: bind_helpers.h. 传值方式 描写叙述 this 或 对象指针 假设对象本身是一 ...

  2. 【转载】How to Reset USB Device in Linux

    USB devices are anywhere nowadays, even many embedded devices replace the traditional serial devices ...

  3. AutoCompleteTextView和Spinner的使用方法

    首先说明AutoCompleteTextView的使用方法.主要是起到自己主动填充的作用.输入keyword,假设存在该字便能够自己主动填充.代码例如以下 activity_main.xml < ...

  4. vc应用CPictureEx类(重载CStatic类)加载gif动画

    1.PictureEx.h文件: //////////////////////////////////////////////////////////////////////// PictureEx. ...

  5. Laravel-redis-订阅发布

    Laravel-redis-订阅发布 标签(空格分隔): php Redis订阅发布 理解订阅发布: publish:将信息 message 发送到指定的频道 channel publish test ...

  6. lucene简单使用demo

    测试结构目录: 1.索引库.分词器 Configuration.java package com.test.www.web.lucene; import java.io.File; import or ...

  7. 51nod 1435 位数阶乘 （手动计算）

    题目: 1435 位数阶乘 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 X是一个n位数的正整数 (x=a0a1...an−1) ...

  8. Vue this.$router.push、replace、go的区别

    1.this.$router.push 描述:跳转到不同的url,但这个方法会向history添加一个记录,点击后会返回到上一个页面 用法 //字符串 this.$router.push('home' ...

  9. 解决css兼容性

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

  10. CodeForces-920E Connected Components? 广度搜索 双向链表 判断联通 大量重复节点的删除

    题目链接:https://cn.vjudge.net/problem/CodeForces-920E 题意 给一个补图,问各个联通块有几个元素,升序排列 注意maxn=2e5, maxm=2e10 思 ...