<!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. php类中的$this，static，const，self这几个关键字使用方法

    本篇文章主要分享一下关于php类中的$this,static,final,const,self这几个关键字使用方法 $this $this表示当前实例,在类的内部方法访问未声明为const及stati ...

  2. linux下执行java类(运行java定时器)

    假如有一个定时器TimerTest.java import java.io.IOException; import java.util.Timer; public class TimerTest { ...

  3. Docker学习笔记 - Docker客户端和服务端

    学习内容: Docker客户端和服务端的通讯方式:client和自定义程序 Docker客户端和服务端的连接方式:socket 演示Docker客户端和服务端之间用remote-api通讯:nc   ...

  4. Spring Security入门（3-7）Spring Security处理页面的ajax请求

  5. Python之进程

    进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体:在当代 ...

  6. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  7. Opencv出现“_pFirstBlock == pHead”错误的解决方法

    先说结论: opencv链接库使用错误. 1,确认VS工程属性中,opencv的链接库路径和版本正确. VS2013应该使用vc12目录,VS2012对应vc11目录.debug版和release版要 ...

  8. Struts(二十一)：类型转换与复杂属性、集合属性配合使用

    背景: 本章节主要以复杂属性.集合属性类型转化为例,来学习这两种情况下怎么使用. 复杂对象属性转换场景: 1.新建struts_04 web.xml <?xml version="1. ...

  9. Struts(十五)：主题

    Theme主题是配置的struts-core.jar下的com.apache.struts2包下的default.properties中(默认配置为:xhtml) ### Standard UI th ...

  10. scrapy安装教程

    Step 1 •安装Python2.7(32位版本) –https://www.python.org/downloads/release/python-279/ Setp 2 •打开"运行& ...