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 ...
随机推荐
- 文件I/O操作（2）
lseek函数原型为int lseek(int fd,int offset, int whence),fd为定位文件的描述符,offset为偏移量,如果是正数,则向文件末尾偏移,负数时,则向文件头偏移 ...
- Nginx负载均衡SFTP
1.CentOS安装SFTP,参考 2.Nginx-1.8.1 下载 ,Nginx_TCP插件 下载 3.安装Nginx [root@localhost nginx-1.8.1]# yum -y in ...
- C程序内存分配
在多任务操作系统中的每一个进程都运行在一个属于它自己的内存沙盘中.这个沙盘就是虚拟地址空间(virtual address space),在32位模式下它总是一个4GB的内存地址块.这些虚拟地址通过页 ...
- bzoj 3551 [ONTAK2010]Peaks加强版（kruskal，主席树，dfs序）
Description [题目描述]同3545 Input 第一行三个数N,M,Q. 第二行N个数,第i个数为h_i 接下来M行,每行3个数a b c,表示从a到b有一条困难值为c的双向路径. 接下来 ...
- leetcode@ [129] Sum Root to Leaf Numbers (DFS)
https://leetcode.com/problems/sum-root-to-leaf-numbers/ Given a binary tree containing digits from 0 ...
- 挑战树莓派：谁才是Geek最爱的开发板？
树莓派(Raspberry Pi)是一块跟信用卡差不多大小的开发板,它的初衷是以低廉的硬件和开源软件扶持一些落后地区的电脑科学教育.由于它在性能和价格方面有一个很好的平衡点,所以很多硬件玩家也想买一个 ...
- Java程序员的10道XML面试题
包括web开发人员的Java面试在内的各种面试中,XML面试题在各种编程工作的面试中很常见.XML是一种成熟的技术,经常作为从一个平台到其他平台传输数据的标准.XML面试问题包括用于转换XML文件的X ...
- 海量Office文档搜索
知识管理系统Data Solution研发日记之十 海量Office文档搜索 经过前面两篇文章的介绍,<分享制作精良的知识管理系统 博客备份程序 Site Rebuild>和<分 ...
- 教你50招提升ASP.NET性能（五）：确保分页是在数据层完成的
(11)Make sure paging is conducted at the database layer 招数11: 确保分页是在数据层完成的 When using grid UI contro ...
- 什么是IDOC，以及IDOC的步骤
创建IDOC: 第一步:WE31 创建IDOC所包含的字段. 第二步:WE30 创建IDOC 把Segment分配给IDOC 第三步:WE81 创建信息类型 第四步:WE82 把 ...