JavaScript无缝滚动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding: 0;
}
#div1{
width:1320px;
height:213px;
margin:100px auto;
position: relative;
background: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left:0;
top:0;
}
#div1 ul li{
float: left;
width:330px;
height:213px;
list-style: none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0]
var aLi=oUl.getElementsByTagName('li');
var speed=2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft-speed+'px';
} var timer=setInterval(move,30); oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
} }
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
</body>
</html>
JavaScript无缝滚动的更多相关文章
- javascript无缝滚动原理
相比之下,无缝拼接能避免切换时出现空白,使用户体验更好! 无缝滚动原理: 制作一个双胞胎,内容跟主体内容一致,样式一致,如果横向排列则并排,当切换的时候,就可以弥补主体空白的地方,其他按普通循环操作即 ...
- javascript无缝滚动示例
效果 图片大小均为200*200; 默认向左循环滚动; 鼠标悬浮暂停,鼠标移走继续滚动; 可以在此基础进行扩展. 下面是代码: <!doctype html> <html lang= ...
- 利用scrollTop 制作图片无缝滚动
<!doctype html><title>javascript无缝滚动 by 司徒正美</title><meta charset="utf-8&q ...
- Javascript学习之无缝滚动
无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- JavaScript（六）——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- Javascript实现图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生javascript效果：无缝滚动
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...
- Javascript 学习笔记 无缝滚动
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin:; padding ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
随机推荐
- 模拟赛1029d2
[问题描述]祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨道上并加入原有序列中.一旦有三个或更多同色的珠子变 ...
- poj1611（并查集）
题目链接:http://poj.org/problem?id=1611 题意: SARS(非典型肺炎)传播得非常厉害,其中最有效的办法是隔离那些患病.和患病者接触的人.现在有几个学习小组,每小组有几个 ...
- PHP之MVC项目实战(二)
本文主要包括以下内容 GD库图片操作 利用GD库实现验证码 文件上传 缩略图 水印 GD库图片操作 <?php $img = imagecreatetruecolor(500, 300); // ...
- inode
硬盘的最小存储单位叫"扇区(sector)",每个扇区存储512字节(相当于0.5kb).系统读取硬盘时,只会读取多个sector即一个block.block 是文件存取的最小单位 ...
- SQL数据库约束
针对维护数据库的完整性,关系型数据库SQL提供了数据约束来管理数据,常用的约束有:外键.唯一.主键. 主键约束:标识数据的唯一,便于数据查询索引: 唯一约束:保证数据的唯一性:常用语法 alter t ...
- Freemarker使用入门
一.概述: FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 Template + data_model = output FreeMarker也是与Web容 ...
- Linux/centos下安装riak
必备的组件: gccgcc-c++glibc-develmakepam-devel 使用yum安装相关组件 sudo yum install gcc gcc-c++ glibc-devel make ...
- 25条提高Visual Studio编码和调试效率的技巧
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:工欲善其事必先利其器.就算手中已经有了利器,如果能掌握一些使用工具的技巧,让利器更加顺 ...
- Zigzag convert
public static String Convert(String s,int row) { char[] c=s.toCharArray(); int len=s.length(); Strin ...
- Sizeof与Strlen的区别与联系（转）
Sizeof与Strlen的区别与联系 一.sizeof sizeof(...)是运算符,在头文件中typedef为unsigned int,其值在编译时即计算好了,参数可以是数组.指针.类型 ...