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" ...
随机推荐
- sql server 2005导出数据到oracle
一. 在sql server下处理需要导出的数据库 1. 执行以下sql,查出所有'float'类型的字段名,手动将float类型改为decimal(18,4). select 表名=d.name,字 ...
- Java里面的转义字符
转义字符是指,用一些普通字符的组合来代替一些特殊字符,由于其组合改变了原来字符表示的含义,因此称为“转义”. 常见的转义字符: \n 回车(\u000a) \t 水平制表符(\u0009) \b 空格 ...
- 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式
注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...
- Java入门(二)——果然断更的都是要受惩罚的。。。
断更了一个多月,阅读量立马从100+跌落至10-,虽说不是很看重这个,毕竟只是当这个是自己的学习笔记,但有人看,有人评论,有人认同和批评的感觉还是很巴适的,尤其以前有过却又被剥夺的,惨兮兮的. 好好写 ...
- java设计模式之抽象工厂模式
上一篇文章(http://www.cnblogs.com/liaoweipeng/p/5768197.html)讲了简单工厂模式,但是简单工厂模式存在一定的问题,如果想要拓展程序,必须对工厂类进行修改 ...
- Scikit-Learn模块学习笔记——数据预处理模块preprocessing
preprocessing 模块提供了数据预处理函数和预处理类,预处理类主要是为了方便添加到 pipeline 过程中. 数据标准化 标准化预处理函数: preprocessing.scale(X, ...
- NYOJ-取石子(二)
取石子(二) 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描述 小王喜欢与同事玩一些小游戏,今天他们选择了玩取石子. 游戏规则如下:共有N堆石子,已知每堆中石子的数量,并且 ...
- codevs1004四子连棋[BFS 哈希]
1004 四子连棋 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗 ...
- 第16章 调色板管理器_16.4 一个DIB位图库的实现(1)
16.4.1自定义的 DIBSTRUCT结构体 字段 含义 PBYTE *ppRow ①指向位图视觉上最上面的一行像素.(不管是自下而上,还是自上而下) ②放在第一个字段,为的是后面定义宏时可方便访问 ...
- quad 和 plane 区别是什么?
Quad就是两个三角形组成四边形,Plane会有很多三角形,哦也 貌似Quad拖上去后看不见,很薄的感觉