本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> Jquery_Ajax_Javascript
立即购买视频教程 改变src或者z-index实现图片切换
夜鹰教程网 来源:www.yyjcw.com 日期:2016/11/26 18:07:34
分享到:
改变src或者z-index实现图片切换

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换。


无意中发现CSS3的方案, http://www.webhek.com/css-flip/  赶紧学习并总结如下


先上代码(多数照搬自上述链接,有很大兼容问题,小心使用)


HTML:



<div class="flip-container">

    <div class="flipper">

        <div class="front">here is content : AA</div>

        <div class="back">here is content : BB</div>

    </div>

</div> 


CSS:



.flip-container {

    margin: 30px;

    display: inline-block;

    border: 1px solid #aaa;

    -webkit-perspective: 500;

    -moz-perspective: 500;

    -ms-perspective: 500;

    perspective: 500;

    -ms-transform: perspective(500px);

    -moz-transform: perspective(500px); /*重要*/

    transform-style: preserve-3d; /*重要*/

}

.flipper {

    position: relative;

    width: 200px;

    height: 200px;

    transition: 0.6s;

    transform-style: preserve-3d; /*重要*/

}

/* 触发翻转 */

.flip-container:hover .flipper{

    transform: rotateY(180deg);


}

.front ,.back{

    position: absolute;

    left: 0;

    top: 0;

    backface-visibility: hidden;  /*重要*/

    width: 100%;

    height: 100%;

}

.front {

    transform: rotateY(0deg);

    z-index: 2;

    background: red;

}

.back {

    transform: rotateY(-180deg);

    background: green;

}


在最外层的容器元素上设置整个动画区域的透视(perspective)属性。

当外层容器元素遇到鼠标悬停事件时,内部存放卡片的容器旋转180度。这里也是控制旋转速度的地方。如果将旋转值设置为-180deg,是反向旋转。

表示卡片正面和背面的元素都要绝对定位,这样它们才能在相同的位置相互遮挡。它们的背面可视性(backface-visibility)属性设置为隐藏,这样每个卡片的背面在翻转时都是看不见的。

将卡片的正面设置为一个比背面要高的z-index值,这样保证卡片的正面在最上面。

将背面卡片旋转180度,这样让它扮演背面的角色。

照搬结束,其中CSS中注释了重要的需要特别注意。


perspective 属性定义 3D 元素距视图的距离,以像素计。直观现象就是内层的元素在翻转时会溢出外层边框,如果不写,或者属性值为0,则只在外层边框内变化。


且属性值需要特别注意和需要翻转的元素的宽高相适应,太少溢出很夸张,太多了和设为0的区别不大。区别效果如下图所示




transform-style: preserve-3d; transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素(照抄自w3cschool)。


flip-container 和 flipper 都需要设置,flip-container不设置会导致溢出的3D效果缺少,flipper 不设置则容器翻转后,我们看到的还是front的背面,backface-visibility: hidden不能体现效果。


比较坑的是transform-style即使在IE11中都是不支持的。


所以还有一个兼容IE的方案,就是不翻转容器,而是同时翻转front和back,幸好IE还是支持backface-visibility: hidden的,所以翻转效果和上一个方案一致。


HTML如下:


<div class="flip-container">

    <div class="front">here is content : AA</div>

    <div class="back">here is content : BB</div>

</div>  

由于直接翻转front和back,flipper就显得多余了,去掉了flipper。


CSS代码如下(经过多方试验,尽量支持各个浏览器,并降级处理了不支持CSS3翻转的浏览器,保留了切换效果)


 


复制代码

复制代码

.flip-container {

    -webkit-perspective: 500;

    -moz-perspective: 500;

    -ms-perspective: 500;

    perspective: 500;

    -ms-transform: perspective(500px);

    -moz-transform: perspective(500px);

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    margin: 30px;

    display: inline-block;

    border: 1px solid #aaa;

    position: relative;

}

/*由于内层绝对定位导致高度缺少,这里显式设置了宽高*/

.flip-container, .front, .back {

    width: 200px;

    height: 200px;

}


.flip-container:hover .front {

    -webkit-transform: rotateY(180deg);

    -moz-transform: rotateY(180deg);

    -o-transform: rotateY(180deg);

    -ms-transform: rotateY(180deg);

    transform: rotateY(180deg);

}

.flip-container:hover .back {

    -webkit-transform: rotateY(0deg);

    -moz-transform: rotateY(0deg);

    -o-transform: rotateY(0deg);

    -ms-transform: rotateY(0deg);

    transform: rotateY(0deg);

    z-index: 3; /* 降级处理不支持CSS3的浏览器,只是简单的将back上升盖住front */

}


.front, .back {

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transition: 0.6s;

    -moz-transition: 0.6s;

    -o-transition: 0.6s;

    -ms-transition: 0.6s;

    transition: 0.6s;

    position: absolute;

    top: 0px;

    left: 0px;

}

.front {

    background: red;

    z-index: 2;

}

.back {

    background: green;

    -webkit-transform: rotateY(-180deg);

    -moz-transform: rotateY(-180deg);

    -o-transform: rotateY(-180deg);

    -ms-transform: rotateY(-180deg);

    transform: rotateY(-180deg);

}


以上也许有许多不必要的兼容代码,水平有限了,欢迎交流更简练的写法。


还有一个小TIPS,在其他情况使用hover触发元素翻转时应如下使用,固定宽高的父元素触发,子元素翻转



.outer {

    width: 200px;

    height: 200px;

}

.inner {

    transition: 0.6s;

}

.outer:hover .inner{

    transform: rotateY(180deg);

}


如下直接对元素hover触发翻转会有很大的使用问题,因为元素翻转过程中,元素区域变小,光标就脱离元素了,于是元素还原,又触发hover变小,造成不顺畅



.inner {

    width: 200px;

    height: 200px;

  transition: 0.6s;

}

.inner:hover{

    transform: rotateY(180deg);

}



复制链接 网友评论 收藏本文 关闭此页
上一条: js正则表达式详解  下一条: 搞混变量作用域将会带来各式各样的奇葩…
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
ajax 清除缓存的两种方法
js日历控件点击日期显示在文本框中…
HTML、JS与FLASH 之间的静态传值方…
主题:ajax请求JSP,为什么GET就是…
javascript 改变iframe(框架)的方…
javascript取鼠标当前坐标
推荐一款网页软键盘 很漂亮的哦
ajax session过期问题的几个解决方…
js文字间隔停顿向上滚动效果
ajax 服务器文本框自动填值
js技术技巧收藏(200例)---1
ajax 数据库中随机读取5条数据动态…
主题:这是否是个捷径?Ajax利用S…
揭开AJAX神秘的面纱(AJAX个人学习…
常用的JS后台导航菜单
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
Javascript toString()、toLocale…
toString()和toLocaleString()的区…
reduce() 方法接收一个函数作为累…
js数组中reducede 用法
ES5中新增的数组Array方法
JS模拟鼠标自动点击功能
JavaScript开发者的工具箱
JavaScript使用技巧
闭包是什么?
js正则表达式详解
改变src或者z-index实现图片切换
搞混变量作用域将会带来各式各样的…
return false preventDefault 和 …
对于body的onload事件和JQuery的r…
产品图片放大镜效果
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html