css3爆炸效果更换图片轮播图
思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高、定位并设置背景图片0.jpg,然后设置每个span的background-position,使这组span平铺在div上。当点击div时换图,换图的实现方法是循环每个span,以div的宽度的中线为定位线,让这组span随机进行transform,然后在结束的时候让span的透明度变为透明,并且瞬间拉回全部span到原始位置并更换span和div的背景图片为下一组的图片(注意div的背景图片永远是span的背景图片的下一张);可以将此效果自动进行图片的更换,变成选项卡
转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爆炸效果换图</title>
<link rel="stylesheet" href="stylesheets/base.css">
<style>
body{
background:#000;
}
body,html{
width: 100%;
height: 100%;
overflow:hidden;
}
#box{
width:900px;
height:500px;
background:url(images/img_tabs/1.jpg) no-repeat;
background-size:cover;
margin:100px auto;
position:relative;
}
#box span{
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
background:url(images/img_tabs/0.jpg);
transform:rotateY(0deg);
}
</style>
<script>
function rnd(m,n){
return parseInt(Math.random()*(n-m)+m);
}
window.onload=function(){
var oBox=document.getElementById('box');
var C=7;
var R=8;
for(var i=0;i<R;i++){
for(var j=0;j<C;j++){
var oSpan=document.createElement('span');
oSpan.style.width=oBox.offsetWidth/R+'px';
oSpan.style.height=oBox.offsetHeight/C+'px';
oSpan.style.left=i*oBox.offsetWidth/R+'px';
oSpan.style.top=j*oBox.offsetHeight/C+'px';
oBox.appendChild(oSpan);
oSpan.style.backgroundPosition=-oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
}
}
var bReady=false;
var iNow=0;
oBox.onclick=function(){
if(bReady){return;}
bReady=true;
iNow++;
var aSpan=oBox.children;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='.4s all ease';
var x=aSpan[i].offsetWidth/2+aSpan[i].offsetLeft-oBox.offsetWidth/2;
var y=aSpan[i].offsetHeight/2+aSpan[i].offsetTop-oBox.offsetHeight/2;
aSpan[i].style.transform='perspective(800px) translateX('+x+'px) translateY('+y+'px) rotateX('+rnd(-180,180)+'deg) rotate('+rnd(-180,180)+'deg) scale(1.4)';
aSpan[i].style.opacity='0';
}
aSpan[0].addEventListener('transitionend',function(){
bReady=false;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='none';
aSpan[i].style.transform='perspective(800px) translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1)';
aSpan[i].style.opacity=1;
aSpan[i].style.backgroundImage='url(images/img_tabs/'+iNow%3+'.jpg)';
oBox.style.backgroundImage='url(images/img_tabs/'+(iNow+1)%3+'.jpg)';
}
},false);
};
};
</script>
</head>
<body>
<div id="box"> </div>
</body>
</html>
css3爆炸效果更换图片轮播图的更多相关文章
- 图片轮播图插件的使用 unslider!!!
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- CSS3——animation的基础(轮播图)
作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...
- BannerDemo【图片轮播图控件】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下一个开源库youth5201314/banner的运用.具体用法请阅读<youth5201314/banner& ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- CSS3之动画模块实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 3d效果的图片轮播
CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...
- android 使用图片轮播图---banner 使用
转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...
随机推荐
- JavaScript基础11——js的全局函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue方法与事件
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...
- ALV用例大全
一.ALV介绍 The ALV Grid Control (ALV = SAP List Viewer)是一个显示列表的灵活的工具,它提供了基本功能的列表操作,也可以通过自定义来进行增强,因此可以允 ...
- SAP Basis常用事务代码
事务码 描述(中英文) SBIT Menu 菜单 SBTA Test background processing 后台处理测试 SBTU Background processi ...
- [转]一些NSArray,NSDictionary,NSSet相关的算法知识
iOS编程当中的几个集合类:NSArray,NSDictionary,NSSet以及对应的Mutable版本,应该所有人都用过.只是简单使用的话,相信没人会用错,但要做到高效(时间复杂度)精确(业务准 ...
- 通过StoryBoard加载视图控制器问题
如果通过拉线的方式拉进来一个UIViewController,再将它绑定一个UIViewController类.创建的时候通过alloc,init创建出来并不会创建出一个你拉进来的UIViewCont ...
- iOS之UI--CAGradientLayer
1.CAGradientLayer 简介 如果说CAShapeLayer是用于提供设置形状的,那么CAGradientLayer是用于提供设置颜色的 英语单词:Gradient:梯度,渐变 那么Gra ...
- Linux文件I/O学习
Linux内核的VFS子系统: 文件描述符 对于内核而言,所有打开的文件都通过文件描述符引用.文件描述符是一个非负整数.当打开一个现有文件或创建一个新文件时,内核向进程返回一个文件描述符.当读 ...
- 《ASP.NET MVC 5 框架揭秘》
<ASP.NET MVC 5 框架揭秘> 基本信息 作者: 蒋金楠 出版社:电子工业出版社 ISBN:9787121237812 上架时间:2014-8-1 出版日期:2014 年8月 开 ...
- 你所不知道的SQL Server数据库启动过程(用户数据库加载过程的疑难杂症)
前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...