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和图片地址分离,这样做你就经易的从数据 ...
随机推荐
- Qt之二维码扫描
简述 二维码(QR Code)是用某种特定的几何图形按一定规律在平面(二维方向)分布的黑白相间的图形记录数据符号信息的.是所有信息数据的一把钥匙.应用十分广泛,如:产品防伪/溯源.广告推送.网站链接. ...
- Accessibility辅助控制类
熟悉Android开发的都知道辅助功能服务 Accessibility service.他的作用有非常多.360豌豆荚等应用市场的非root自己主动安装.微信抢红包插件.盲人辅助程序等等功能都是靠它实 ...
- ioctl.h 分析
ioctl.h 分析 我自己画了个解析图...不要嫌弃丑啊.. . 哈哈 type The magic number. Just choose one number (after consulting ...
- IBM AppScan官方帮助文档错别字缺陷,IBM的測试人员也太粗心了吧
袁术=元素?
- 深搜解Riding the Fences
Riding the Fences Farmer John owns a large number of fences that must be repairedannually. He traver ...
- updatefile.sh - Linux下代码更新脚本
以下写的是一个关于文件上传的代码shell脚本 该篇文章主要有下面几个方面的考虑: 1.文章主要用于在Linux下代码包批量上传: 2.将被覆盖的代码备份做备份,用于兴许做问题查看或者代码的回退(回退 ...
- 十分钟掌握diff&patch用法
作为程序员,了解diff&patch命令是非常必要的.比如说我们发现某个项目有bug代码,而自己又没有svn的提交权限,那么此时最合适的解决方法就是用diff命令做一个补丁发给项目成员.项目成 ...
- hdoj--1260--Tickets（简单dp）
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- IDEA模板设置
/** * @className: $CLASSNAME$ * @author: liuyachao * @date: $DATE$ $TIME$ */ ================= ...
- PostgreSQL 数据库性能调优的注意点
PostgreSQL提供了一些性能调优的功能.主要有如下几个方面.1.使用EXPLAIN EXPLAIN命令可以查看执行计划,这个方法是我们最主要的调试工具. 2.及时更新执行计划中使用的统计信息 ...