scrollLeft的相关问题(js横向无缝滚动)
<div id="demo">
<div id="innerdemo">
<div id="demo1">
<img src="data:images/0.jpg" />
<img src="data:images/1.jpg" />
<img src="data:images/2.jpg" />
<img src="data:images/3.jpg" />
<img src="data:images/4.jpg" />
<img src="data:images/5.jpg" />
</div>
<div id="demo2"></div>
</div>
</div>
#demo{ width:600px; height:200px; border:1px solid #CCC; margin:20px auto; overflow:hidden;}
#innerdemo{ width:800%; }
#demo1,#demo2{float:left;}
function crossMarquee(){
var speed=10;
var oDemo=document.getElementById("demo");
var oinnerDemo=document.getElementById("innerdemo");
var oDemo1=document.getElementById("demo1");
var oDemo2=document.getElementById("demo2");
oDemo2.innerHTML=oDemo1.innerHTML;
function Marquee(){
if(oDemo1.offsetWidth<=oDemo.scrollLeft){
oDemo.scrollLeft-=oDemo1.offsetWidth;
}else{
oDemo.scrollLeft++;
}
}
var myMar=setInterval(Marquee,speed);
oDemo.onmouseover=function(){clearInterval(myMar);}
oDemo.onmouseout=function(){myMar=setInterval(Marquee,speed);}
}
window.onload=function(){
crossMarquee()
};
这是一个简单的js无缝滚动代码,有个需要注意的地方
1、scrollLeft必须在最外层容器上执行
2、scrollLeft无需加单位px
scrollLeft的相关问题(js横向无缝滚动)的更多相关文章
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- JS 实现无缝滚动动画原理(初学者入)
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...
- marquee横向无缝滚动无js
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...
- CSS3+HTML5特效4 - 横向无缝滚动
先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...
- js 图片无缝滚动
html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...
- JS实现无缝滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- mysql备份还原
备份java代码如下: /** * 备份单个数据库 * @param dbName 数据库名称 * @return 备份成功或者失败 */ @Override public boolean backu ...
- shutdown
关机命令 $sudo shutdowm [-hrc] -h定时关机,以分钟为单位的计时,时间或now -h now立即关机 -h +2020分钟后关机 -h 12:0012点关机 -r now立即重启 ...
- gcc编译参数-fPIC的一些问题
gcc编译参数-fPIC的一些问题 (2012-07-26 15:41:08) 转载▼ 标签: linux compiler gcc -fpic it 分类: NSN_BspDriver ppc_85 ...
- 浅谈Java泛型之<? extends T>和<? super T>的区别
关于Java泛型,这里我不想总结它是什么,这个百度一下一大堆解释,各种java的书籍中也有明确的定义,只要稍微看一下就能很快清楚.从泛型的英文名字Generic type也能看出,Generic普通. ...
- 报表引擎API开发入门—简单程序数据集
小编最近接的项目是有关报表开发的,很想把这部分知识分享出来.希望大家能够支持我!不多说,马上进入我们今天的话题. API基本知识 小编最近项目所做的是关于一个报表软件—FineReport报表开发的一 ...
- OpenXml入门
一. OpenXml简介: Open XML标准的简单介绍:Ecma Office Open XML(“Open XML”)是针对字处理文档.演示文稿和电子表格的国际化开放标准,可免费供多个应用程序在 ...
- GIT安装和使用
GIT 首先登陆github账号 在本地创建一个文件夹 点击文件夹,右键,选择Git create repository here 操作之后,会生成一个.git文件(这个文件为隐藏文件) 在此 ...
- 转:linux下安装或升级GCC4.8,以支持C++11标准
转:http://www.cnblogs.com/lizhenghn/p/3550996.html C++11标准在2011年8月份获得一致通过,这是自1998年后C++语言第一次大修订,对C++语言 ...
- Mysql备份系列(3)--innobackupex备份mysql大数据(全量+增量)操作记录
在日常的linux运维工作中,大数据量备份与还原,始终是个难点.关于mysql的备份和恢复,比较传统的是用mysqldump工具,今天这里推荐另一个备份工具innobackupex.innobacku ...
- MySQL Index详解
FROM:http://blog.csdn.net/tianmo2010/article/details/7930482 ①MySQL Index 一.SHOW INDEX会返回以下字段 1.Tabl ...