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. Javascript高级程序设计读书笔记（第三章）

    第3章 基本概念 3.4 数据类型 5种简单数据类型:undefined.boolean.number.null.string. typeof操作符,能返回下列某个字符串:“undefined”.“b ...

  2. Canvas简单动画和像素处理

    动画 利用JavaScript,可以在canvas元素上很容易地产生动画效果. var posX = 20, posY = 100; setInterval(function() { context. ...

  3. VS2015 新Web项目(C#6)出现CS1617异常的解决

    VS2015 新Web项目(C#6)出现CS1617错误的解决 VS2015新增了对C#6的支持. 在新的Web项目模板中通过引入nuget包Microsoft.CodeDom.Providers.D ...

  4. （三）CodeMirror - Event

    "change" (instance: CodeMirror, changeObj: object) { from, // object to, // object text, / ...

  5. OpenCV——ANN神经网络

    ANN-- Artificial Neural Networks 人工神经网络 //定义人工神经网络 CvANN_MLP bp; // Set up BPNetwork's parameters Cv ...

  6. Ruby和Rails开发环境安装

    更新包管理 sudo apt-get update 安装curl sudo apt-get install curl *安装rvm via curl \curl -L https://get.rvm. ...

  7. apt软件包管理

    apt软件包管理 ----   http://wiki.ubuntu.org.cn/UbuntuHelp:AptGet/Howto/zh APT HOWTO  ----    http://www.d ...

  8. 列表:一个打了激素的数组3 - 零基础入门学习Python012

    列表:一个打了激素的数组3 让编程改变世界 Change the world by program 列表的一些常用操作符 比较操作符 逻辑操作符 连接操作符 重复操作符 成员关系操作符 ...... ...

  9. JavaWeb学习笔记-使用HttpSession对象跟踪会话

    使用HttpSession接口开发的步骤: 1.获取HttpSession对象 2.对HttpSession对象进行读写 3.手工终止HttpSession,或者自动终止 常用方法: getId(): ...

  10. block（三）揭开神秘面纱（上）

    block到底是什么 我们使用clang的rewrite-objc命令来获取转码后的代码. 1.block的底层实现 我们来看看最简单的一个block: [caption id="attac ...