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. Android测试框架1（非原创）

    1.继承AndroidTestCase :public class JunitTest3 extends AndroidTestCase {} 2.在AndroidManifest.xml清单文件中添 ...

  2. 创建和管理表【weber出品必属精品】

    创建表 必须有 : 1. CREATE TABLE 的权限 SQL> conn /as sysdba 已连接. SQL> create user test default tablespa ...

  3. Spring中的WebDataBinder浅析

    Spring可以自动封装Bean,也就是说可以前台通过SpringMVC传递过来的属性值会自动对应到对象中的属性并封装成javaBean,但是只能是基本数据类型(int,String等).如果传递过来 ...

  4. hdu1054 树状dp

    B - 树形dp Crawling in process... Crawling failed Time Limit:2000MS     Memory Limit:10000KB     64bit ...

  5. artDialog的几种基本使用

    1.confirm形式 var dialog=art.dialog({ lock:true, content: '请确认,您是否要删除选中的用吗?', icon: 'question', ok: fu ...

  6. eclipse 将文件夹作为sourcefolder

    文件夹---右键

  7. Song of Pi

    def main(): pi = ' # 预先给出需要比较的值 t = int(raw_input()) for _ in xrange(t): song = raw_input().strip(). ...

  8. centos在安装apache2.4版本的时候遇到ARP not found解决办法

    今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... noconfigure: error: APR not fou ...

  9. AFNetworiking与ASIHttpRequest对比

    在开发iOS应用过程中,如何高效的与服务端API进行数据交换,是一个常见问题.一般开发者都会选择一个第三方的网络组件作为服务,以提高开发效率和稳定性.这些组件把复杂的网络底层操作封装成友好的类和方法, ...

  10. UVA1589 Xiangqi

    Xiangqi is one of the most popular two-player board games in China. The game represents a battle bet ...