Javascript实现图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向左无缝滚动</title>
<style type="text/css">
body,html,div,a{ margin:0 auto; padding:0}
#scroll_top {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 98%;
}
#scroll_top img {
border: 3px solid #F2F2F2;
}
#scroll_main {
float: left;
width: 800%;
}
#scroll1 {
float: left;
}
#scrol2 {
float: left;
margin-left:7px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var speed=50;var tab=document.getElementById("scroll_top");
var tab1=document.getElementById("scroll1");
var tab2=document.getElementById("scrol2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
}
</script>
</head>
<body> <div id="scroll_top">
<div id="scroll_main">
<div id="scroll1">
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
</div>
<div id="scrol2" ></div>
</div>
</div>
</body>
</html>
上面還有一篇是用jquery做的圖片無縫滾動。http://www.cnblogs.com/dying/p/3394529.html
Javascript实现图片无缝滚动的更多相关文章
- javascript实现图片无缝滚动（scrollLeft的使用方法介绍）
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 原生javascript效果：无缝滚动
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...
- Javascript做图片无缝平滑滚动
因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- Java NIO流 -- 缓冲区(Buffer，ByteBuffer)
用来定义缓冲区的所有类都以Buffer类为基类,Buffer定义了缓冲区的基本特征. 直接子类: ByteBuffer 用来存储byte类型的缓冲区,可以在这种缓冲区中存储任意其他基本类型的二进制值( ...
- 命令rm
mv -r 递归删除文件夹内所有东西mv -i 交互式删除mv -f 强制删除,没有警告提示
- 50道经典的JAVA编程题(26-30)
50道经典的JAVA编程题(26-30),这么晚了,早点睡了要,明早8点考java祝我好运吧!!!晚安~ [程序26]Ex26.java(跳过了,好没意思的题啊)题目:请输入星期几的第一个字母来判断一 ...
- Docker系列(九)Kubernetes安装
环境: A.B两天机器A机器IP:192.169.0.104,B机器IP:192.168.0.102,其中A为Master节点,B为Slave节点 操作系统:Centos7 Master与Slave节 ...
- 配置nginx,支持php的pathinfo路径模式
nginx模式默认是不支持pathinfo模式的,类似index.php/index形式的url会被提示找不到页面.下面的通过正则找出实际文件路径和pathinfo部分的方法,让nginx支持path ...
- Latex 中宽度的设置和理解
\textwidth, 文本区域的全部宽度 \columnwidth, 文本中一列的宽度,单栏或者多栏的情况下,值是不同的 但是,一旦\textwidth, \columnwidth, \linewi ...
- Linux基本操作 9----- 认识与学习bash
一 认识bash这个shell 1 管理整个计算机硬件的其实就是操作系统的内核,这个内核是需要被保护的,所以我们一般用户就只能通过shell来跟内核通信,以让内核达到我们所想打到的工作. 2 只要能够 ...
- 代码自动生成工具MyGeneration之一（程序员必备工具）
代码自动生成工具MyGeneration之一(程序员必备工具) 转 分类: C#2008-08-06 18:12 16064人阅读 评论(12) 收藏 举报 工具数据库相关数据库stringbrows ...
- linux下配置squid http proxy过程
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国 ...
- 修改 suse 上的postfix 的日志路径
刚刚搭建的邮件服务器,没过多久硬盘就爆满了,不得已移动存储,包括日志. 移动存储灰常简单,查找 /etc/postfix/main.cf 中的 data_directory / base_direct ...