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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
js 金额文本框实现代码
Feb 14 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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和ACCESS写聊天室(二)
2006/10/09 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
初学JavaScript第二章
2008/09/30 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
javascript中Function类型详解
2015/04/28 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python的Django框架使用入门指引
2015/04/15 Python
python制作最美应用的爬虫
2015/10/28 Python
如何利用python查找电脑文件
2018/04/27 Python
python计算两个地址之间的距离方法
2018/06/09 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
政府个人对照检查材料
2014/08/28 职场文书
2014年团委工作总结
2014/11/13 职场文书
小学校长个人总结
2015/03/03 职场文书
旅行社计调工作总结
2015/08/12 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
python unittest单元测试的步骤分析
2021/08/02 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
MySQL 数据库范式化设计理论
2022/04/22 MySQL