html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

	#box1{

		width:100px;

		height:100px;

		position: absolute;

		background:orange;

		left:200px;

		opacity:0.5;

	    top:200px;

	    z-index: 1;

	}

	#box2{

		width:100px;

		height:100px;

		position: absolute;

		background:blue;

		left:300px;

		opacity: 1;

		z-index: 2;

	    top:100px;

	}

	#box3{

		width:100px;

		opacity:0.5;

		height:100px;

		position: absolute;

		background:red;

		left:400px;

	    top:200px;

	    z-index: 1;

	}

	button{

		width:50px;

		height: 30px;

	}

</style>

</head>

<body>

    <button id="btn2" value = "上"> < </button>

    <button id="btn1" value = "下"> > </button>

    <div id="box1"></div>

    <div id="box2"></div>

    <div id="box3"></div>

</body>

</html>

javascript

<script type="text/javascript" src="startmove.js"></script>

<script type="text/javascript">

	window.onload = function(){

		var oBtn = document.getElementsByTagName('button');

		var oDiv = document.getElementsByTagName('div');

		var arr = [];

        //获取每个方块的当前样式，并以数组的方式来保存

		for(var i = 0 ;i < oDiv.length ; i++){

			arr.push( [ parseInt( getStyle(oDiv[i] , 'left')) , parseInt( getStyle(oDiv[i] , 'top')) , getStyle(oDiv[i],'opacity') * 100  , parseInt(getStyle(oDiv[i] , 'zIndex'))])

		}

        console.log(arr)

        //上一张

        oBtn[0].onclick = function(){

        	//向数组开头添加数组的最后一个元素，并将此元素删除

        	arr.unshift(arr[arr.length-1]);

        	arr.pop(arr[arr.length-1]);          

            for(var i = 0; i < oDiv.length ; i ++){

            	startMove(oDiv[i] , { left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2]});

            	oDiv[i].style.zIndex = arr[i][3];

            }

        }

        //下一张

        oBtn[1].onclick = function(){

        	//操作数组，将第一个元素放到数组最后，并将第一个元素删除

        	arr.push(arr[0]);

        	arr.shift(arr[0]);

        	//重新赋值

        	for(var i = 0; i < oDiv.length ; i ++){

            	startMove(oDiv[i] , { left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2]})

            }

        }

        //获取样式

		function getStyle(obj, attr) {

			if (obj.currentStyle) {

				return obj.currentStyle[attr];

			} else {

				return getComputedStyle(obj, false)[attr];//获取样式的最终值，改变之后的值，没有的话就获取css样式的值

			}

		}

	}

</script>

startmove.js前面已经上传过了，这里就省略了

javascript切换效果的更多相关文章

  1. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  2. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  3. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  4. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  5. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  6. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  7. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  8. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  9. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

随机推荐

  1. (转).net程序员转战android第三篇---登录模块之静态登录

    这一篇我将分2个部分记录登录界面,第一部分是静态登录, 这部分将如何从界面布局.控件使用.文件关系.数据验证.登陆实现等5小块记录. 第二部分是动态登录,这块会基于上面的4小块,在数据验证不是静态数据 ...

  2. 树状jquery导航条

    $(function () {        $(".leftsecoundtitle").css({ "display": "none" ...

  3. 常用SQL语句学习整理

    增 insert into table_name (column_name1,column_name2) values (value1,value2) 删 delete from table_name ...

  4. 加载gif图过渡效果

    加载gif图片,过渡效果: 调用: - (id)initWithGifView:(UIView *)view { self = [super initWithView:view]; if (self) ...

  5. SpringMVC中用@ParamVariable传递的参数包含斜杠(/)时，匹配不了报404错误的解决方案

    今天做网站[标签]筛选功能时,出现了这么个奇葩的问题. 我是直接通过<a>标签中href来跳转的,url中包含汉字 <a href="/tags/标签A"> ...

  6. asp.net 中如何判断字符串中有几个逗号 (asp也通用)

    如: 字符串 a="1,2,3"; 怎样判断a 中的逗号 有几个 len(a)-len(replace(a,",",""))

  7. 去掉Eclipse打开后定期弹出Usage Data Upload对话框

    Eclipse 的 UDC 老定期蹦出来说要上传使用数据到 eclipse 官网服务器去除方法: 1.删除 eclipse/plugins 目录下以 org.eclipse.epp.usagedata ...

  8. 本地windows主机无法访问虚拟机里主机解决办法

    一:设置虚拟机里IP,使其与本地计算机IP在同一网段 本地计算机网络IP设置如下: 虚拟机里ip为192.168.1.9 设置IP步骤请参考:Linux里如何设置IP(RED HAT) 二:将虚拟机网 ...

  9. Could not open a connection to your authentication agent

    执行ssh-add ~/.ssh/rsa  就会遇到上述错误了 解决方案: 先执行  eval `ssh-agent`  (是-键上的那个`) 再执行 ssh-add ~/.ssh/rsa成功 ssh ...

  10. linux awk 使用

    awk是linux下的一个命令,他对其他命令的输出,对文件的处理都十分强大,其实他更像一门编程语言,他可以自定义变量,有条件语句,有循环,有数组,有正则,有函数等.他读取输出,或者文件的方式是一行,一 ...