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" ...
随机推荐
- ELK Kafka json to elk
Logstash配置 input { kafka { zk_connect => "127.0.0.1:2181" topic_id => "clus ...
- maven项目下jsp文件中el表达式失效问题
本来是为了写个springmvc的小demo,雏形搭建起来后想起来做成maven的好了,就重新建的maven项目,坑就从这里开始了... maven创建web项目默认使用的是web 2.3版本,web ...
- KVM 介绍(1):简介及安装
学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...
- jQuery入门第二天&&&正则表达式完结篇——仿smarty引擎的制作
hi 周一完全的不在状态...中午还去观战,没有睡觉的我,晚上的smarty不知道能不能做完,加油吧 1.jQuery ---过滤性选择器(二)--- --[attribute=value]属性选择器 ...
- .Net程序员之Python基础教程学习----字符串的使用 [Second Day]
在The FirstDay 里面学习了列表的元组的使用,今天开始学习字符串的使用.字符串的使用主要要掌握,字符串的格式化(C语言中我们应该都知道,Python和C语言差别不大),字符串的基本 ...
- 扫描线+堆 codevs 2995 楼房
2995 楼房 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 地平线(x轴)上有n个矩(lou)形(fan ...
- 能跨域和跨浏览器的flashcookie for jquery插件
对于写网站时需要跨域和跨浏览器的可以看看这个. 引入jquery 和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯. mySwfStore.set('myKey ...
- [No000064]python 变量命名规范
python源码和其他一些书籍,命名各种个性,没有一个比较统一的命名规范.于是总结了一些,供参考. 模块名: 模块应该使用尽可能短的.全小写命名,可以在模块命名时使用下划线以增强可读性.同样包的命名也 ...
- [No00002E]关于大数据,你不知道的6个迷思
还是那个观点:计算机,编程语言,互联网,大数据等等都只是工具! 导语:看过美剧<纸牌屋>没?知道这部"白宫甄嬛传"为什么会火吗?靠的是大!数!据! 过去两年,在 Net ...
- hashmap先按照value从大到小排序,value相等时按照key从小到大排序
hashmap先按照value从大到小排序,value相等时按照key从小到大排序. [2]是从小到大排序,在[2]代码基础上交换o1,o2位置即可. 代码中用到[1]中提到的在value相等时再比较 ...