<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>图片立体过渡切换效果</title>

    <style type="text/css">

    *{margin:0;padding:0;}

    div{width:500px;height:500px;margin:150px auto;position:relative;perspective:800px;}

    ul{list-style:none;width:500px;height:280px;}

    li{position:absolute;top:0;left:0;transition:all 1s;}

    li.center{transform:translateZ(100px);z-index:10;}

    li.left1{transform:rotateY(25deg) translateX(-150px);z-index:9;}

    li.left2{transform:rotateY(18deg) translateX(-300px);z-index:8;}

    li.right1{transform:rotateY(-25deg) translateX(150px);z-index:9;}

    li.right2{transform:rotateY(-18deg) translateX(300px);z-index:8;}

    li.back{transform:translateZ(-200px);z-index:1;}

    span{width:60px;height:60px;background:rgba(255,255,255,.3);color:#fff;font-weight:bold;position:absolute;left:-380px;

         top:80px;z-index:11;font-size:50px;text-align:center;line-height:60px;cursor:pointer;}

    span:nth-of-type(2){left:810px;}

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var ul=document.getElementsByTagName("ul")[0];

            var div=document.getElementsByTagName("div")[0];

            var lis=document.getElementsByTagName("li");

            var spans=document.getElementsByTagName("span");

            var classes=["left2","left1","center","right1","right2","back","back","back","back"];

            var lock=false //定义动画锁,false为没锁定

            spans[0].onclick=function(){

               if(lock==false){//如果动画没有被锁

                   lock=true;

                   setTimeout(function(){

                       lock=false;//1秒后解锁

                   },500);

                   var first_class=classes.shift();//取出数组第一个元素

                   classes.push(first_class);//将取出的第一个元素加到放到数组最后

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

                       lis[i].className=classes[i];//将lis的类与classes对应起来

                   }

               }

            }

            spans[1].onclick=function(){

                if(lock==false){//如果动画没有被锁

                   lock=true;

                   setTimeout(function(){

                       lock=false;//1秒后解锁

                   },500);

                   var last_class=classes.pop();

                   classes.unshift(last_class);

                   for(var j=0;j<lis.length;j++){

                        lis[j].className=classes[j];

                   }

                }

            }

        }

    </script>

</head>

<body>

    <div>

        <ul>

            <li class="left2"><img src="1.jpg" alt="" /></li>

            <li class="left1"><img src="2.jpg" alt="" /></li>

            <li class="center"><img src="3.jpg" alt="" /></li>

            <li class="right1"><img src="4.jpg" alt="" /></li>

            <li class="right2"><img src="5.jpg" alt="" /></li>

            <li class="back"><img src="6.jpg" alt="" /></li>

            <li class="back"><img src="7.jpg" alt="" /></li>

            <li class="back"><img src="8.jpg" alt="" /></li>

            <li class="back"><img src="9.jpg" alt="" /></li>

        </ul>

        <span>&lt;</span>

        <span>&gt;</span>

    </div>

</body>

</html>

利用css3+js实现简单带立体过渡效果的图片切换（chrome浏览器）的更多相关文章

  1. 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  3. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  4. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  5. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  6. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  7. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  8. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  9. 利用Vue.js实现拼图游戏

    之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

随机推荐

  1. Ansible性能调优

    Ansible企业实战环境中,如果管理的服务器越来越多,Ansibe执行效率会变得比较慢,可以通过优化Ansible提供工作效率,由于Ansible基于SSH协议通信,SSH连接慢会导致整个基于Ans ...

  2. JS的if和switch

    var aa=parseInt(prompt("请输入你的年龄")); //定义输入 if(aa<18){ //输出小于18,返回值少年 alert("少年&quo ...

  3. HTTP协议扫盲（六）InputStream的复用

    一.问题提出 在进行网关引擎开发时,获取到一个http请求的inputstream后,可能要多次利用它进行read操作.由于流读过一次就不能再读了,所以需要实现InputStream的复制. 而Inp ...

  4. Spring Security 入门（1-4-1）Spring Security - 认证过程

    理解时可结合一下这位老兄的文章:http://www.importnew.com/20612.html 1.Spring Security的认证过程 1.1.登录过程 - 如果用户直接访问登录页面 用 ...

  5. Object.defineProperties()和Object.defineProperty()方法

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...

  6. layer ui插件显示tips时，修改字体颜色

    今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: ...

  7. Hibernate（十六）：Hibernate二级缓存

    Hibernate缓存 缓存(Cache):计算机领域非常通用的概念.它介于应用程序和永久性数据存储源(如磁盘上的文件或者数据库)之间,起作用是降低应用程序直接读取永久性数据存储源的频率,从而提高应用 ...

  8. Hibernate（十一）：映射继承关系的三种方案

    背景: 在一些项目中,会采用集成的关系来定义数据库实体类,比如:人(Person)与学生(Student),学生来源与人,所以人的基本属性学生也拥有:但学生有的一些属性,人就不具有.人与学生之间很显然 ...

  9. 初级 Java 的 3 本进阶书

    1.Head First设计模式 这是我看过最幽默最搞笑最亲切同时又让我收获巨大的技术书籍!深入浅出,娓娓道来,有的地方能笑死你! 翻开一看,真如Erich Camma所说,简直欲罢不能.本书是Ore ...

  10. Drainage Ditches~网络流模板

    Description Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover ...