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 ...
随机推荐
- C程序内存分配
在多任务操作系统中的每一个进程都运行在一个属于它自己的内存沙盘中.这个沙盘就是虚拟地址空间(virtual address space),在32位模式下它总是一个4GB的内存地址块.这些虚拟地址通过页 ...
- bzoj 1412 [ZJOI2009]狼和羊的故事（最小割）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1412 [题意] 在一个n*m的格子中,将羊和狼隔开的最小代价. [思路] 最小割. 由 ...
- 将Magento后台汉化的方法
方法一: 打开/app/code/core/Mage/Adminhtml/Block/Catalog/Product/Attribute/Set/Main.php文件, 找到几个用来显示的代码,替换成 ...
- Unity3D入门之JavaScript
刚刚接触Unity3D游戏引擎,这里做点学习笔记.下面是我建立的简单场景,左侧的Hierarchy(层次)视图里显示了场景中所有游戏对象,这些基本对象可以从Create下拉菜单里创建.当你点击某个对象 ...
- hdu4612-Warm up（边的双连通分量）
题意:有n个点,m条边,有重边.现在可以任意在图上添加一条边,求桥的最少数目. 题解:思路就是求出双连通分量之后缩点成为一棵树,然后求出树的直径,连接树的直径就能减少最多的桥. 难点在于:有!重!边! ...
- Android的Spinner
使用Spinner遇到不少坑啊 3.自定义spinner样式 <style name="AppTheme" parent="Theme.AppCompat.Ligh ...
- Android实例-为程序创建快捷方式(未测试)
结果: 1.因为只有小米手机,没有三星手机,没法测试.如果哪位神测试过的话,记得M我哦,谢了. 实例代码: unit Unit1; interface uses System.SysUtils, S ...
- nyoj 115 城市平乱
城市平乱 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市 ...
- URL- 含义及组成
URL (uniform resource locator) : 互联网的每个网页都有自己唯一的统一资源定位器,由3部分组成:通信协议,主机名,资源名. HTTP(hypertext transfer ...
- .NET设计模式（3）：抽象工厂模式（Abstract Factory）
):抽象工厂模式(Abstract Factory) 抽象工厂模式(Abstract Factory) --探索设计模式系列之三 Terrylee,2005年12月12日 转载:http://terr ...