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和图片地址分离,这样做你就经易的从数据 ...
随机推荐
- debian mysql 定时自己主动备份的脚本
#!/bin/sh LOG=/var/log/mysql-backup.log # mysql db info USER_ROOT=XXXXXX USER_PWD=XXXXXXX # mysql da ...
- 【LeetCode-面试算法经典-Java实现】【058-Length of Last Word （最后一个单词的长度）】
[058-Length of Last Word (最后一个单词的长度)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string s consis ...
- bzoj3993: [SDOI2015]星际战争(网络流)
3993: [SDOI2015]星际战争 题目:传送门 题解: 洛谷AC了,但是因为bzoj的spj有问题所以暂时没A 一道老题目了,二分时间然后网络流判断. 每次st-->武器连时间*攻击力 ...
- window如何在命令行关掉端口
欢迎加入前端交流群来py:749539640 进入cmd netstat -ano | findstr :yourPortNumber taskkill /PID typeyourPIDhere ...
- correct ways to define variables in python
http://stackoverflow.com/questions/9056957/correct-way-to-define-class-variables-in-python later say ...
- OKHttp使用简介
现在android网络方面的第三方库很多,volley,Retrofit,OKHttp等,各有各自的特点,这边博客就来简单介绍下如何使用OKHttp. 梗概 OKHttp是一款高效的HTTP客户端,支 ...
- VP红外遥控器实现
要点: 1.设置外部中断为边沿触发(包含下降沿和上升沿),下降沿TimeOut=0,上升沿读取TimeOut计数. 2.定时器中TimeOut++,定时器定时中断周期为100us 3.红外的只有两种时 ...
- HDU 1950 Bridging signals【最长上升序列】
解题思路:题目给出的描述就是一种求最长上升子序列的方法 将该列数an与其按升序排好序后的an'求出最长公共子序列就是最长上升子序列 但是这道题用这种方法是会超时的,用滚动数组优化也超时, 下面是网上找 ...
- The Structure of an App-ios应用架构-MVC
During startup, the UIApplicationMain function sets up several key objects and starts the app runnin ...
- Python 计算相似度
#计算相似度 #欧式距离 # npvec1, npvec2 = np.array(det_a), np.array(det_b) # similirity=math.sqrt(((npvec1 - n ...