Javascript做图片无缝平滑滚动
因需要，google得到。作者不详。多谢。我这里略作修改。只是改变了ID。
<!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>
特来收藏。
Javascript做图片无缝平滑滚动的更多相关文章
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- marquee图片无缝拼接滚动
marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollL ...
- Javascript实现图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript实现图片无缝滚动（scrollLeft的使用方法介绍）
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...
- js基础练习---图片无缝左右滚动效果（主要以复制删除为主）
昨天闲来没事 看了下图片效果 发现这个方法j 就自己模仿下 上代码 当中有很多的纰漏 请大神们多多指教一二? <script type="text/javascript" ...
- js特效，轻松实现内容的无缝平滑滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- H5+CSS3做图片轮播滚动效果
HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...
- 原生javascript实现回到顶部平滑滚动
function rt() { var d = document, dd = document.documentElement, db = document.body, top = dd.scroll ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
随机推荐
- Swift之基础知识
Swift之基础知识 出于对Swift3.0的学习,写下这篇基本语法的笔记.希望能帮助记忆 -0- 这边提供Swift3.0中文教材,资源链接: https://pan.baidu.com/s/1c2 ...
- HW6.9
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 【noip2011】观光公交
题解: 做这题的时候为了敢速度- - 直接orz了神小黑的题解 其实我还是有想一个拙计的方法的- - dp:f[i][j] 表示到i点使用j个加速器 在i前上车的人的时间和 轻松愉悦转移之 - - 但 ...
- HDU-4686 Arc of Dream 构造矩阵
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4686 因为ai = ai-1*AX+AY ,bi = bi-1*BX+BY ,那么ai*bi=AX*B ...
- 通过在shell脚本中用scp或rsync实现远程同步文件
通过在shell脚本中用expect实现远程scp文件 shell expect的简单用法 http://myunix.blog.51cto.com/191254/1095074 http://ji ...
- ubuntu源码安装R语言
下载后解压完,进入开始配置: ./configure --enable-R-shlib 报错: configure: error: con--with-readline=yes (default) a ...
- .net MVC全局定时器执行作业
首先的一个需求是在OA系统中定时跑一些定时作业,例如发放年假等事务,之前的做法是在服务器上加入一个服务,用系统定时作业去跑服务,这样有个问题就是当系统在发布的过程中,有可能忘记启动服务而导致无法定时执 ...
- angular中的promise
angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- Java编程 -- 命名规范
转自:http://www.hawstein.com/posts/google-java-style.html#Naming 命名约定 5.1 对所有标识符都通用的规则 标识符只能使用ASCII字母和 ...