利用css3+js实现简单带立体过渡效果的图片切换(chrome浏览器)
<!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><</span>
<span>></span>
</div>
</body>
</html>
利用css3+js实现简单带立体过渡效果的图片切换(chrome浏览器)的更多相关文章
- 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果(按轨迹移动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
- 利用pixi.js制作精灵动画
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- ECharts.js 超简单入门(本质canvas)
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- 利用Vue.js实现拼图游戏
之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...
随机推荐
- c 语言常量
1,整数常量 整数常量可以是十进制.八进制或十六进制的常量.前缀指定基数:0x 或 0X 表示十六进制,0 表示八进制,不带前缀则默认表示十进制. 整数常量也可以带一个后缀,后缀是 U 和 L 的组合 ...
- MySQL一些中重要命令
前言: 最近在面试的过程中,深感对MySQL一些重要命令的缺失.借着这个机会,补补这块的知识.不让自己只会增删查改,懂一些高级的东西 limit 用法 order by 用法 in 和 between ...
- 开发一个http代理服务器
参考链接: http://www.cnblogs.com/jivi/archive/2013/03/10/2952860.html https://www.2cto.com/kf/201405/297 ...
- java基础总结(1)安装jdk
卸载java java -version yum remove java yum groupjava java 安装java tar -zxvf jdk-8u60-linu ...
- nodejs调试总结
之前nodejs开发中最痛苦的就是调试,因为我之前开发node时使用的编辑器还没有将nodejs的调试也集成进去,所以简单对nodejs开发的调试做了点探索,nodejs本身就有调试功能,同时node ...
- C# 后台构造json数据
前后台传值一般情况下,都会用到json类型的数据,比较常见,但是每次用到的时候去网上找比较麻烦,所以自己记录一下,下次直接用. 构造的json串格式,如下: [{","name&q ...
- Linux网络配置(仅主机模式)
1.启动虚机,网络选择:仅主机模式 2.命令行输入 rm -rf /etc/udev/rules.d/70-persistent-net.rules 3.修改虚机中的网络配置 >>vim ...
- Mysql:查用的基本操作
查看MySQL提供什么存储引擎: mysql> show engines; 查看MySQL当前默认的存储引擎: mysql> show variables like '%storage_e ...
- Linux(二)CentOS的安装
centos6.8 链接:https://pan.baidu.com/s/1TjCYXzijMzfpiZ9Z-D1Qhg 密码:7mvn 2.1 新建虚拟机 1 2.2 选中稍后安装操作系统(先把虚拟 ...
- 洛谷 P2590 [ZJOI2008]树的统计(树链剖分)
题目描述一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u v ...