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. 点击<a>标签，禁止页面自动跳到顶部的解决办法

       最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...

  2. HashMap陷入死循环的例子

    //使用这个例子可以模拟HashMap陷入死循环的效果,可能需要执行多次才会出现. 1 package com.hanzi; import java.util.HashMap; public clas ...

  3. Mysql常用命令记录

    -- 导出数据库: mysqldump -u user_name -p database_name > import_file.sql -- 执行脚本 source database.sql

  4. STL set容器添加结构体并排序

    #include <iostream> #include <string> #include <cstring> //strcpy #include <cst ...

  5. [Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  6. [1] Tornado Todo Day0

    Github地址: day0 初始化数据库: jakeychen@JC:~/Public/tornado_todo$ pwd /home/jakeychen/Public/tornado_todo j ...

  7. Halloween party

    https://www.hackerrank.com/challenges/halloween-party def main(): t = int(raw_input()) for _ in rang ...

  8. (转)syslog日志等级

    设施.优先级”(facility.priority)设施(facility): kern 0 内核日志消息 user 1 随机的用户日志消息 mail 2 邮件系统日志消息 daemon 3 系统守护 ...

  9. java中byte数组与int类型的转换（两种方式）

    http://blog.csdn.net/z69183787/article/details/38564219 http://blog.csdn.net/z69183787/article/detai ...

  10. nRF51822 SDK初体验

    作为两家BLE芯片大厂之一,nordic不像TI那么开放,nordic的开发资料是很难找的. 今天有幸得到nordic的BLE芯片nRF51822的SDK,看了一下.   首先,nordic号称协议栈 ...