css transform 3D幻灯片特效实现步骤解读


Posted in Javascript onMarch 27, 2013

js

$(function(){ 
var length = $(".container a").length; 
var $items = $(".container a"); 
$items.on("transitionend", function(event){ 
$items.removeClass("trans"); 
}); 
$(".container a").each(function(index, value){ 
var $child = $(this); 
if (index === 0) { 
$child.addClass("current showing"); 
} else if (index === 1) { 
$child.addClass("left showing"); 
} else if (index == 2) { 
$child.addClass("out-left"); 
} else if (index == (length - 2)) { 
$child.addClass("out-right"); 
} else if (index === (length - 1)) { 
$child.addClass("right showing"); 
} else { 
$child.addClass("hiding"); 
}; 
$child.click(function(){ 
var $item = $(this); 
//next item 
var $nextItem = (index === (length - 1)) ? $items.eq(0) : $items.eq(index + 1); 
//previous item 
var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1); 
var $rightItem; 
if(index == 0){ 
$rightItem = $items.eq(length - 2); 
} else if (index == 1) { 
$rightItem = $items.eq(length - 1); 
} else { 
$rightItem = $items.eq(index - 2); 
} 
var $leftItem; 
if(index == length - 2){ 
$leftItem = $items.eq(0); 
} else if (index == length - 1) { 
$leftItem = $items.eq(1); 
} else { 
$leftItem = $items.eq(index + 2); 
} 
//current item click,return 
if ($item.hasClass("current")) { 
return false; 
} else if ($item.hasClass("left")) { 
//center move right 
$preItem.attr("class","trans right showing"); 
//left move center 
$item.attr("class","trans current showing"); 
//right item move out 
$rightItem.attr("class","trans out-right"); 
//next move left 
$nextItem.attr("class","trans left showing"); 
//left ready 
$leftItem.attr("class","out-left"); 
} else if ($item.hasClass("right")) { 
//center move left 
$nextItem.attr("class","trans left showing"); 
//right move center 
$item.attr("class","trans current showing"); 
//left item clear 
$leftItem.attr("class","trans out-left"); 
//previous move right 
$preItem.attr("class","trans right showing"); 
//right ready 
$rightItem.attr("class","out-right"); 
}; 
}); 
}); 
});

html
<html> 
<head> 
<title>slideshow</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="slide.css"> 
</head> 
<body> 
<div class="container"> 
<div class="wapper"> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-KIgBNvrrORQ/UVJOzcGIOKI/AAAAAAAAACE/mL6ujDu-3vQ/s1038/1.jpg" alt="1" /></a> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-hWNOas_yOGk/UVJOzaN-dPI/AAAAAAAAACI/QJb_mj76hv0/s1038/10.jpg" alt="2" /></a> 
<a href="javascript:void(0)"><img src="https://lh4.googleusercontent.com/-Dop6scyA0D4/UVJOzVaYywI/AAAAAAAAACM/5RwzULHpEWQ/s1038/2.jpg" alt="3"/></a> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-5HrHIQyz6Ok/UVJO1golL-I/AAAAAAAAACk/hJN972jmg4g/s1038/3.jpg" alt="4"/></a> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-W1LBipEDZUU/UVJO1qI3kQI/AAAAAAAAACg/eeTYFiGmNgw/s1038/4.jpg" alt="5"/></a> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-KvNsoffzejc/UVJO1LRTnoI/AAAAAAAAACU/Nv7yH95zqFo/s1038/5.jpg" alt="6"/></a> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-T31bgnUYzeA/UVJO3B3VHCI/AAAAAAAAACw/TOpCZ0zJfZ0/s1038/6.jpg" alt="7"/></a> 
<a href="javascript:void(0)"><img src="https://lh5.googleusercontent.com/-tvR6IES_W9I/UVJO4HZYM8I/AAAAAAAAAC8/9yzl4C4qtm8/s1038/7.jpg" alt="8"/></a> 
<a href="javascript:void(0)"><img src="https://lh5.googleusercontent.com/-Li5wNWZ6BOI/UVJO3ZdRYDI/AAAAAAAAAC0/Nk_JSi8fJtQ/s1038/8.jpg" alt="9"/></a> 
<a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-mig_PoX_wtM/UVJO5NrvmZI/AAAAAAAAADE/GI3o24bq3eY/s1038/9.jpg" alt="10"/></a> 
</div> 
</div> <script type="text/javascript" src="jquery-1.8.3.js"></script> 
<script type="text/javascript" src="slide.js"></script> 
</body> 
</html>

css
body,div{margin: 0;padding: 0;} 
.container{width: 100%;height: 450px; position: relative;} 
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;} 
.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;} 
.container a img{width: 480px;height: 300px;display: block;border: 0;} 
.container .current{z-index: 2;} 
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;} 
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;} 
.showing{opacity: 1;visibility: visible;} 
.hiding{opacity: 0;visibility: hidden;} 
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
javascript的函数作用域
Nov 12 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
JS实现轮播图效果
Jan 11 Javascript
JS删除数组元素的函数介绍
Mar 27 #Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 #Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 #Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 #Javascript
早该知道的7个JavaScript技巧
Mar 27 #Javascript
JavaScript中的style.display属性操作
Mar 27 #Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 #Javascript
You might like
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
Vue的Options用法说明
2020/08/14 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
几道PHP面试题
2013/04/14 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
卖车协议书
2014/04/21 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
催款律师函范文
2015/05/27 职场文书
值班管理制度范本
2015/08/06 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Java基础之this关键字的使用
2021/06/30 Java/Android
Win11开始菜单添加休眠选项
2022/04/19 数码科技