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 ...
随机推荐
- 设计模式_C++源码+总结
C++源码下载: http://yunpan.cn/Q7fadjGgEJxib 提取码 63cb 总结:
- android sdk api结构解析
一.系统级:android.accounts android.app 1.OS 相关 android.os android.os.storage ...
- Eclipse热部署JSP
项目中JSP修改,每次都要重新部署启动才生效,我真切记得以前都不是这样子的 本来应该只需要刷新页面就可以查看到最新的修改的了 和以前工作空间项目配置对比 唯一不同的是,我现在这个工作空间 ...
- OpenCV中的常用函数
1.cvLoadImage:将图像文件加载至内存: 2.cvNamedWindow:在屏幕上创建一个窗口: 3.cvShowImage:在一个已创建好的窗口中显示图像: 4.cvWaitKey:使程序 ...
- UILabel的各种属性与方法的使用
//设置字体:粗体,正常的是 SystemFontOfSize label1.font = [UIFont boldSystemFontOfSize:20]; //设置文字颜色 label1.text ...
- jquery事件函数和原生事件绑定函数中return false的区别
一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件 ...
- CSS链接、光标、DHTML、缩放
个属性 18.2 CSS中光标的使用(更详细可看文档) 属性名称 属性值 说明 cursor auto ...
- Web- 一些标签样式
网上找来的.有点用 1.只有下划线的文本框:<input style="border:0;border-bottom:1 solid black;background:;"& ...
- PowerDesigner 模型文档 说明
PowerDesigner 模型文档 说明 目录(?)[+] 一． 模型文档说明 在前面几篇里介绍了PowerDesigner 的几种模型,如果我们项目里用到的模型较多,亦或者项目牵涉的部门很 ...
- JS基础DOM篇之一：何为DOM？
近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它.谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸 ...