<!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. java程序员最不愿意看到的十件事

     0.遍历结果集并构造对象如果你是个时髦的开发者而不是专业人员,显然你从某篇博客中读过有开发者遇到Hibernate的“性能问题”,因而认为ORM都不好,觉得手动编码“明显更好”.喜欢的话你当然可以用 ...

  2. C# 后台构造json数据

    前后台传值一般情况下,都会用到json类型的数据,比较常见,但是每次用到的时候去网上找比较麻烦,所以自己记录一下,下次直接用. 构造的json串格式,如下: [{","name&q ...

  3. Oracle12c在Win10上的安装配置实践

    1.环境 操作系统:Win10专业版(64位) 数据库:Oracle 12c Release 2(Version 12.2.0.1.0,64位) 2.下载Oracle12c oracle官网下载地址: ...

  4. leetcode算法： Find the Difference

    Given two strings s and t which consist of only lowercase letters.String t is generated by random sh ...

  5. IDEA里面创建maven项目，依赖

    在IDEA里面创建一个简单的Maven项目: 在file-->new-->project ,选择maven,点击next 里面的一些简单参数的定义(第一次使用的话可以使用默认的值进行后面的 ...

  6. switchysharp设置

    在线规则列表里面插入下面的网址:https://autoproxy-gfwlist.googlecode.com/svn/trunk/gfwlist.txt

  7. PIL绘图

    # coding:utf-8 # PIL的ImageDraw 提供了一系列绘图方法,让我们可以直接绘图.比如要生成字母验证码图片 from PIL import Image, ImageDraw, I ...

  8. 有意思的c++题目

    #include <iostream> #include<stdlib.h> using namespace std; class A { public: int _a; A( ...

  9. springaop问题——Cannot subclass final class org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages

    问题描述: 在使用springaop对目标对象增强时,若切点的条件过于宽泛就会出现以下异常! 如: @Before("execution(* *(..))") @Before(&q ...

  10. [LeetCode] Minimum Factorization 最小因数分解

    Given a positive integer a, find the smallest positive integer b whose multiplication of each digit ...