JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果，本来打算用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实现文字图片无缝滚动的更多相关文章
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- angular实现的文字上下无缝滚动
最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
随机推荐
- 拷贝构造函数不能传值，只能传引用，而且一般是传const引用
为什么呢?因为传值函数,需要调用拷贝构造函数,那就层层循环无止境了.
- u-boot学习(六)：自己写bootloader
依照前面分析的u-boot的启动流程,自己写一个简单的Bootloader.这是參考韦东山老师的视频写的. 1.初始化硬件:关看门狗.设置时钟.设置SDRAM.初始化NAND Flash 2.假设Bo ...
- 用LayerDrawable实现两个图片的叠加效果
Drawable[] layers = new Drawable[2]; layers[0] = new ColorDrawable(primaryColor); layers[1] = new Co ...
- Collection 和 Collections 的差别？
Collection 是 java.util 下的接口,它是各种集合的父接口,继承于它的 接口主要有 Set 和 List:Collections 是个 java.util 下的类.是针对集合的 帮助 ...
- php在数字前面补0得到固定长度数字的两种方法
比較基础,事实上两个内置函数都能实现. 1 sprintf 语法: string sprintf(string format, mixed [args]...); 返回值: 字符串 函数种类: 资料 ...
- HDU5638 / BestCoder Round #74 (div.1) 1003 Toposort 线段树+拓扑排序
Toposort 问题描述 给出nn个点mm条边的有向无环图. 要求删掉恰好kk条边使得字典序最小的拓扑序列尽可能小. 输入描述 输入包含多组数据. 第一行有一个整数TT, 表示测试数据组数. 对 ...
- GIT GUI简易教程
GIT GUI简易教程 前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中 ...
- 性能监控之监控SQL语句
分析表 analyze table tablename compute statistics for all indexes; analyze table tablename compute stat ...
- Windows服务的创建，安装，卸载
我公司项目的产线系统要与WMS物流系统做借口对接,需要我创建一个windows服务的项目,里面含有7个服务 创建Windows服务: 1.如图:点击 windows->经典桌面->wind ...
- Codeforces 982 C. Cut 'em all!（dfs）
解题思路: 代码中有详细注解,以任意一点为根,dfs遍历这棵树. 每一个节点可能有好几个子树,计算每棵子树含有的节点数,再+1即为这整棵树的节点. 判断子树是否能切断与根之间的联系,如果子树含有偶数个 ...