图片在body中来回滚动

原创 2015年11月18日 10:35:20

效果如图:

JS代码

var oScroll=document.getElementById('scroll');
	var right=0;
      setInterval(function(){
      	if(right==0){

			oScroll.style.left=oScroll.offsetLeft+2+'px';
			if(oScroll.offsetLeft>=document.body.clientWidth-202){
				right=2;
			}
		}
      	if(right==2){
      		oScroll.style.left=oScroll.offsetLeft-2+'px';
      		if(oScroll.offsetLeft<=0){
      			right=0;
      		}
      	}
      },30);
HTML代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>闭包</title>
		<style>
		body{
			margin:0;
			padding: 0;
		}
			
			#scroll{
				width:200px;
				height:100px;
				position: absolute;
			}
			#scroll img{
				width:100%;
				height:100%;
			}
		</style>

	</head>
	<body>
		
		<div id="scroll">
			<img src="img/index2.png" />
		</div>
	</body>
</html>

图片循环滚动控件ScrollingImageView

设置一个图片,控件可以自动循环滚动,单张图片首尾拼接/** * 可滚动的ImageView控件,使用startRolling(int) 或者 startRolling(Bitmap)启动滚动 * ...
  • brian512
  • brian512
  • 2016年03月02日 20:58
  • 1003

创建滚动进度条的几种方法

方法一:不创建新的进程 1、拖一个progress control控件在对话框上,将该控件的Marquee属性设为True。在添加两个Button控件。如下图所示: 2、给控件添加个变量m_pro...
  • u010670734
  • u010670734
  • 2016年03月07日 08:09
  • 2208

背景图片跟随手势滑动的ViewPager

背景图片跟随手势滑动的ViewPager,可各方向滑动或点击切换页面。效果参考 ANA Portuguese Airports(google play地址)效果图GitHub代码下载组成项目由一个Ac...
  • zhe525069676
  • zhe525069676
  • 2016年06月18日 17:50
  • 457

marquee标签无限上下滚动

marquee标签无限上下滚动
  • u014796999
  • u014796999
  • 2016年12月14日 13:14
  • 1923

Ora-01830 日期格式图片在转换整个输入字符串之前结束

一、问题描述        oracle数据库下,报这个错        Ora-01830 日期格式图片在转换整个输入字符串之前结束。如下图所示。        sql语句是这样写的 ...
  • Yolanda_NuoNuo
  • Yolanda_NuoNuo
  • 2017年04月06日 11:08
  • 1412

ORA-01830: 日期格式图片在转换整个输入字符串之前结束解决方

[+] 本文目录 事件to_date函数示例代码 转载于:http://blog.csdn.net/sinat_19435069/article/details/4702...
  • lipr86
  • lipr86
  • 2016年11月28日 19:05
  • 1095

向上下左右滚动图片的特效

var speed=30 butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top1为...
  • haibo0668
  • haibo0668
  • 2016年06月02日 12:45
  • 142

js获取浏览器body或窗宽度高度

很多时候我们需要用到js获取窗口的宽度或者高度,每个浏览器会有不同的方法,总结了一下如下: var s = " "; document.documentElement.scrol...
  • jinzhuming0308
  • jinzhuming0308
  • 2016年04月02日 12:22
  • 4926

移动端弹出层滚动时禁止body滚动

移动端弹出层滚动时禁止body滚动 相信很多写移动端的朋友会遇到这个问题,我也遇到了,之后就辛辛苦苦的在网上找解决办法,下面我大概提一下我在网站遇到的几种办法,行不行的通呢?本人就亲测了下。如果有什...
  • qq_35741728
  • qq_35741728
  • 2016年10月28日 17:22
  • 13896

用绝对定位实现无滚动条的全屏滚动

有滚动条的全屏滚动 /* 用通配符清除默认样式减少代码量,实际项目应对用到的标签清除默认样式 */ *{margin:0;padding:0;list-sty...
  • Tyro_java
  • Tyro_java
  • 2016年01月10日 14:06
  • 1309
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片在body中来回滚动
举报原因:
原因补充:

(最多只允许输入30个字)