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= ...
随机推荐
- HTML标记语法之图片Img元素
语法:<img src=”xxx.jpg”alt=”xxx”title=”xxx”> 属性可取值如下: 属性名称 属性值 说明 src URL 图片路径 alt 文本 图片无法显示时的文本 ...
- EasyUI中控件汉化问题
--BY ZYZ 我在使用EasyUI的过程中,遇到了控件无汉化的情况,如下图. 这么多洋文看着觉得挺烦的.时间居然是月日年格式的,这样可不行,得改. 重写控件代码?别,那能是我这种低级代码C-V客能 ...
- Android下拉刷新效果实现
本文主要包括以下内容 自定义实现pulltorefreshView 使用google官方SwipeRefreshLayout 下拉刷新大致原理 判断当前是否在最上面而且是向下滑的,如果是的话,则加载数 ...
- 重温WCF之WCF传输安全（十三）（4）基于SSL的WCF对客户端采用证书验证（转）
转载地址:http://www.cnblogs.com/lxblog/archive/2012/09/20/2695397.html 前一篇我们演示了基于SSL的WCF 对客户端进行用户名和密码方式的 ...
- JAVA基础学习之final关键字、遍历集合、日期类对象的使用、Math类对象的使用、Runtime类对象的使用、时间对象Date（两个日期相减）（5）
1.final关键字和.net中的const关键字一样,是常量的修饰符,但是final还可以修饰类.方法.写法规范:常量所有字母都大写,多个单词中间用 "_"连接. 2.遍历集合A ...
- [LeetCode] Word Break II (TLE)
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- httpclient 4.5 get请求
还是官网靠谱啊 package com.test.httpclient.getpost; import java.io.IOException; import java.util.ArrayList; ...
- wp8 入门到精通 高仿微信发信息 键盘不消失
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> < ...
- PHPCMS_v9 wap不同列表采用不同模板的方法
.在phpcms\modules\wap\index.php中搜索 $template = ($TYPE[$typeid]['parentid']==0 && in_array($ty ...
- win8.1/win10 UEFI + GPT 安装（测试机型：华硕S56CM）
本教程简要介绍在UEFI 启动模式下在GPT分区表中,最简单的方法安装 Windows 10 x64 位系统.(并非傻瓜教程,安装者总要有一定的经验基础)下面先简单介绍一下UEFI和GTP. UEFI ...