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

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;}

(0)

相关推荐

  • jQuery表单美化插件jqTransform使用详解

    jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

  • 浅谈javascript获取元素transform参数

    之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. 复制代码 代码如下: body{-webkit-transform: translateX(20px);} 但当我尝试这样做的时候,奇迹出现了: 当时我的内心几乎是崩溃的,我只想安安静静的获取translate的值而已啊,谁知给我弹出这货,虽然上高数课的时候也有讲到所有变化(二维.三维)效果都可以浓

  • Android变形(Transform)之Camera使用介绍

    引言 接Android变形(Transform)之Matrix,来总结下Camera的使用,Camera主要实现3D的变形,有转动,旋转等,Camera的源码是由Native(本地代码)实现,提供的接口也比较简单.官方的介绍:A camera instance can be used to compute 3D transformations and generate a matrix that can be applied, for instance, on a  Canvas. 效果图 原图

  • jqTransform form表单美化插件使用方法

    jQtransForm下载地址 http://www.jb51.net/jiaoben/25166.html 用法 1- 添加脚本包含在标题部分的网页 复制代码 代码如下: //required <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.j

  • XslTransform.Transform将结果输出到字符串里的方法

    XslTransform.Transform 方法将结果输出到字符串里有2中办法: 通过System.IO.MemoryStream类来实现.  通过System.Text.StringBuilder类来实现. 下面是具体的实现方法:  复制代码 代码如下: System.Xml.Xsl.XslTransform RssXslt = new System.Xml.Xsl.XslTransform();   System.Xml.XmlDocument RssXml = new System.Xm

  • Android变形(Transform)之Matrix用法

    引言 最近在研究Android的变形,Android的2D变形(包括缩放,扭曲,平移,旋转等)可以通过Matrix来实现,3D变形可以通过Camera来实现.接下来就将我这俩天研究的东西和大家分享下,先来看看Matrix的用法. 效果图 变形以后 Matrix矩阵 坐标变换矩阵,即一个3*3的矩阵,用来对图形进行坐标变换. 图1.1  A为坐标矩阵,C为原始矩阵,R是A和C矩阵相乘记过,那么可以知道:(矩阵知识,大学没学好的伤不起啊) x' = a*x + b*y + c y' = d*x +

  • 使用ajax+jqtransform实现动态加载select

    今天在工作的时候遇到一个问题,页面中公司名称是在项目名称选择后用ajax读取出来的.但是jqtransform是在页面加载完成后调用的,所以导致了公司名称下拉框无法展示最新的数据. <link rel="stylesheet" href="${ctx}/jqtransformplugin/jqtransform.css" type="text/css"></link> <script type="text/

  • 一个用xslt样式将xml解析为xhtml的类TransformBinder(兼容FF和IE7.0)

    由于前面的方法xslt需要在xml文件内部直接导入,而项目中用到的xml文件是系统生成的,只能提供路径,而没有办法改写xml里面的内容,所以需要找一个方法能够在外部将xml和xslt关联在一起,这样既达到了目的,也可以应用于多个xml文件,方便管理. 先上代码,系统中使用module这个js进行打包,module这个工具是专门用来将js进行打包,这个工具以后的文章再做介绍,我自己现在只会使用,还没研究其底层的代码:这边我们将js写在一个文件里面,包括类以及类实现的方法, 下面是js代码:tran

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

    js 复制代码 代码如下: $(function(){ var length = $(".container a").length; var $items = $(".container a"); $items.on("transitionend", function(event){ $items.removeClass("trans"); }); $(".container a").each(functi

  • js实现3D图片逐张轮播幻灯片特效代码分享

    本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下 <head> <meta http-equiv="Content-Type

  • 利用CSS制作3D动画

    目录 CSS 3D 基础知识 使用 transform-style 启用 3D 模式 利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果 通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果 利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果 利用距离.角度及光影构建不一样的 3D 效果 3D 计数器 空间效果 空间 3D 效果热身 利用图片素材 3D 无限延伸视角动画

  • jQuery平滑旋转幻灯片特效代码分享

    本文实例讲述了jQuery平滑旋转幻灯片特效.分享给大家供大家参考.具体如下: 这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼:图片大小和颜色自定义请修改jQuery-jcImgScroll.js. 运行效果图:               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. js关键代码: <script src="js/jQuery-1.7.1.j

  • Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)

    本文实例讲述了jQuery实现时尚漂亮的幻灯片特效,基本能满足你在网页上使用幻灯片(焦点图)效果.分享给大家供大家参考.具体如下: 幻灯片效果描述:用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换.   运行效果截图如下: 具体实现代码: <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript&qu

  • 酷! 不同风格页面布局幻灯片特效js实现

    这是一款效果非常炫酷的不同风格页面布局幻灯片特效.该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果. 该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CSS3属性,需要最新版本的现代浏览器才能看到效果.对于IE浏览器,前面几种效果可以在IE11及以上的浏览器看到效果,最后一种效果由于IE浏览器不支持SVG clip-path属性,所以是看不到效果的. 使用方法  HTML结构  该幻灯片的基本HTML结构如下:每一个幻灯片都有各自的布局class类,

  • jquery实现的3D旋转木马特效代码分享

    本文实例讲述了jquery实现的3D旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的3D旋转木马特效代码,适合用于产品展示,便于用户循环浏览产品细节,是一款非常实用的特效代码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现的3D旋转木马特效代码如下 <head> <meta http-equiv=

  • jQuery超精致图片轮播幻灯片特效代码分享

    本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"

  • jquery实现叠层3D文字特效代码分享

    jquery实现叠层3D文字特效是一款效果非常酷,实现代码也很简单,没有用HTML5和CSS3元素,纯粹用Jquery代码实现的. 运行效果图:------------------------------效果演示----------------------------- 为大家分享的jquery实现叠层3D文字特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=u

  • jquery带动画效果幻灯片特效代码

    本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图:                                 -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

随机推荐