<!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. 阿里云API网关（15）监控预警

    网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...

  2. 云计算（2）it 是什么

    2015年,全世界在it上面的花费达到3亿8千亿美金之多. 云数据中心:核心基础架构,云计算的物理载体,提供数据处理.存储和高性能计算支撑,包括服务器.存储.冷却.机房空间和能耗管理等. 超大规模的云 ...

  3. Maven的作用是什么

    现在我们开发的项目基本上都是maven项目,maven项目也是一个项目,类似于javaProject,javaWebProject,就是多了些功能. 那就说说究竟多了什么功能呢. 1 . 帮你下载ja ...

  4. Linux show funny time[ liunx 有趣的东西展示]

    Linux show funny time 1.sl 奔跑吧,火车! nick-suo@ubuntu:~$ sudo apt-get install sl 2.telnet 星球大战 nick-suo ...

  5. ZOJ-1655 Transport Goods---dijkstra变形&&最长路

    题目链接: https://vjudge.net/problem/ZOJ-1655 题目大意: 有N-1个城市给首都(第N个城市)支援物资,有M条路,走每条路要耗费一定百分比的物资.问给定N-1个城市 ...

  6. hdu2050 折线分割平面---递推

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2050 题目大意: 求n条折线分割平面的最大数目 思路: 先看n条直线的时候 一条直线 2个平面 两条 ...

  7. python自定义函数可以向前引用不用声明

    #有些编程语言不够"聪明",向这类向前引用的方式会导致报错,但Python足够"醒目",这段代码是正确的! def next():     print('我在n ...

  8. github git 在GitHub上创建项目并将本地项目push到网站上

    众所周知,git是与svn类似的版本控制系统,git的去中心化.分布式等的优点,在不久将来用户量大有可能超过svn, 常见的代码托管网站有GitHub,coding.net, gitee.com 码云 ...

  9. CodeForces 916E Jamie and Tree(树链剖分+LCA)

    To your surprise, Jamie is the final boss! Ehehehe. Jamie has given you a tree with n vertices, numb ...

  10. Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    /** * @author hechen */ var gs = { /**获得屏幕宽度**/ ScreenWidth: function () { return window.screen.widt ...