<!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. Python内置函数(2)——divmod

    英文文档: divmod(a, b) Take two (non complex) numbers as arguments and return a pair of numbers consisti ...

  2. Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 前言中不允许有内容。

    Error creating document instance. Cause: org.xml.sax.SAXParseException;  lineNumber: 1; columnNumber ...

  3. axure 预览"HTTP/1.1 302 Found"

    使用Axure编辑原型时,点击预览出现"HTTP/1.1 302 Found" 第一想到的就是重新安装Axure和检查原型文件是否损坏,验证后证明前Axure和.rp文件都是完好的 ...

  4. 《深入实践Spring Boot》阅读笔记之二：分布式应用开发

    上篇文章总结了<深入实践Spring Boot>的第一部分,这篇文章介绍第二部分:分布式应用开发,以及怎么构建一个高性能的服务平台. 主要从以下几个方面总结: Spring Boot SS ...

  5. Spark:scala集合转化为DS/DF

    scala集合转化为DS/DF case class TestPerson(name: String, age: Long, salary: Double) val tom = TestPerson( ...

  6. jquery楼层效果

  7. 浅析Java的Frok/Join框架

    一丶Fork/Join框架产生背景: 随着并发需求的不断提高和硬件的不断发展,程序并行执行仿佛就提上日程上来了,伟大的毛主席就说过:"人多力量大",所以如果一件事可以分配给多个人同 ...

  8. [LeetCode] Find Pivot Index 寻找中枢点

    Given an array of integers nums, write a method that returns the "pivot" index of this arr ...

  9. [LeetCode] Merge Two Binary Trees 合并二叉树

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  10. spring初学总结思路

    spring初步学习总结 总概括有四个方面:IOC,AOP,JDBC,和事务管理 ioc:实现了new类的一个权力的反转.(平时new类导致代码冗余,手动new类无法满足动态new类的需求) aop: ...