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 ...
随机推荐
- linux内核-红黑树
//rbtree.h /* Red Black Trees (C) 1999 Andrea Arcangeli <andrea@suse.de> This program ...
- 浏览器中显示视频，flash等的代码处理
window.flashView=function(flash_url){ var html=''; html+='<div id="obj_flash_div">'; ...
- [读书笔记]了不起的node.js(二)
这周做项目做得比较散(应该说一直都是这样),总结就依据不同情境双开吧-这篇记录的是关于node的学习总结,而下一篇是做项目学到的web前端的知识. 1.HTTP篇 node的HTTP模块在第一篇时接触 ...
- Enterprise Suse运维
1,Suse CDH4安装 wget archive.cloudera.com/cdh4/one-click-install/redhat/6/x86_64/cloudera-cdh-4-0.x86_ ...
- POJ 2749--Building roads（2-SAT）
题意:John有n个牛棚,每个牛棚都住着一些牛,这些牛喜欢串门(drop around, 学到了...),所以John想要建几条路把他们连接起来.他选择的方法是建两个相连中转站,然后每个牛棚连接其中一 ...
- TCP/IP模型的简单解释
TCP/IP模型是互联网的基础.想要理解互联网,就必须理解这个模型.但是,它不好懂,我就从来没有搞懂过. 前几天,BetterExplained上有一篇文章,很通俗地解释了这个模型.我读后有一种恍然大 ...
- jQuery each的实现与call方法的详细介绍
转载原出处: http://www.f2es.com/jquery-each-intro/ 先贴上jquery实现each功能的源代码(把常用的call部分提取出来,为了方便理解,就进行了一定的修改) ...
- UI进阶 多线程
一.多线程概述 程序.进程.线程 程序:由源代码生成的可执行应用.(例如:QQ.app) 进程:一个正在运行的程序可以看做一个进程.(例如:正在运行的QQ就是一个进程),进程拥有独立运行所需的全部资源 ...
- SQL Server 127个SQL server热门资料汇总
SQL Server 127个SQL server热门资料汇总 最近有许多关于如何学习SQLSERVER的问题,其实新手入门的资源和贴子很多,现在向大家隆重推荐经过精心整理的[SQLSer ...
- web项目设计中框架的数据流
这张图虽然简单,但是很好的说明了一个web框架,需要实现那些模块. 图片来自 <Go Web编程>