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. listener笔记

    listener 分四步: 在被观察者类中创建 onXXListener Interface,包含一个方法:xxxListener(object o),参数根据需要观察者需要设定. public in ...

  2. 通过maven创建自己的archetype

    最近项目组做好一套框架,为了推广需要创建一些空白项目给项目组使用,因为所有的空白项目里面的配置基本上都是一样的,为了减少重复工作,想通过maven创建一个自己的archetype,于是在网上大致搜了一 ...

  3. Silverlight Visifire控件应用去水印

    版本几之前可以用属性直接去掉水印: chart.Watermark = false; 现在我用的会报错,已过时,在网上查了写资料,解决办法如下: 一.很多人都是利用摭罩的办法,定位到水印显示的地方,建 ...

  4. OC基础 可变数组与不可变数组的使用

    OC基础 可变数组与不可变数组的使用 1.不可变数组 1.1不可变数组的创建 //实例方法 NSArray *array = [[NSArray alloc] initWithObjects:&quo ...

  5. Tomcat unable to start

    在学习springMvc时,导入springfreemarker 的jar包,写好web.xml,config.xml 后. 部署到tomcat,异常如下: 八月 27, 2016 5:44:41 下 ...

  6. hdu4006 优先队列

    A - 签到 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65768KB     64bit I ...

  7. html label 标签的 for 属性

    如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1 使用for属性 <label for ...

  8. Oracle11g R2学习系列 之五回闪

    Oracle里面有一个回闪的操作,这个貌似sql server是没有的.要使用这个功能,需要用到两个时间内部函数 TIMESTAMP和TO_TIMESTAMP.其中,函数TO_TIMESTAMP的语法 ...

  9. js获取IP地址的方法小结

    s代码获取IP地址的三种方法,在js中取得客户端的IP地址. 原文地址:http://www.jbxue.com/article/11338.html 1,js取得IP地址的方法一 <scrip ...

  10. Python操作 Memcache、Redis、RabbitMQ、SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...