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 相关文章推荐
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
浅谈javascript回调函数
Dec 07 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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
一个比较简单的PHP 分页分组类
2009/12/10 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
python实现堆栈与队列的方法
2015/01/15 Python
python3.x实现发送邮件功能
2018/05/22 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
使用python绘制二维图形示例
2019/11/22 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
车辆安全检查制度
2014/01/12 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
2014公司年终工作总结
2014/12/19 职场文书
酒会邀请函
2015/01/31 职场文书
个人总结格式范文
2015/03/09 职场文书
师范生小学见习总结
2015/06/23 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2019年教师入党申请书
2019/06/27 职场文书
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript