JS实现有点炫的图片展示效果-图片解体和组合

经过4个月的努力学习，迎来了进入市场的最后一个学习项目。自己模仿了一个图片展示效果，用在了项目中，感觉挺炫的。在这里分享一下，希望大家喜欢~！

bomb-showImg : 在线演示http://runjs.cn/detail/tl9quyke查看源码http://runjs.cn/code/tl9quyke

HTML :

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="utf-8">

<link rel="stylesheet" href="style.css">

<title>test</title>

<script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

</head>

<body>

<button onclick="bomb()">爆发吧！小宇宙！</button>

<div id="container">

<div class="login-bg"></div>

</div>

</body>

</html>

JavaScript :

var bgArr = $(".login-bg"); //获取所有背景小方块存入数组中

for(var i=0;i<9;i++){

//双重for循环初始化每一个小方块的位置，通过随机数，分别把它们放到4个象限，i控制行，j控制列

for(var j=0;j<9;j++){

$(bgArr[9*i+j]).css({ //分别设置每个小方块的背景位置

backgroundPosition:-40*j+"px "+(-40*i)+"px"

})

if(j%4==0){ //将满足条件的小方块放置到第二象限

$(bgArr[9*i+j]).css({

top:parseInt(Math.random()*600)+"px",

left:parseInt(Math.random()*600)+"px"

});

}else if(j%4==1){ //将满足条件的小方块放置到第四象限

$(bgArr[9*i+j]).css({

top:-parseInt(Math.random()*600)+"px",

left:-parseInt(Math.random()*600)+"px"

});

}else if(j%4==2){ //将满足条件的小方块放置到第三象限

$(bgArr[9*i+j]).css({

top:parseInt(Math.random()*600)+"px",

left:-parseInt(Math.random()*600)+"px"

});

}else if(j%4==3){ //将满足条件的小方块放置到第一象限

$(bgArr[9*i+j]).css({

top:-parseInt(Math.random()*600)+"px",

left:parseInt(Math.random()*600)+"px"

});

}

function bomb(){ //关键函数

$("#container").show(); //显示背景小方块的容器

for(var i=0;i<9;i++){

for(var j=0;j<9;j++){

$(bgArr[9*i+j]).animate({ //小方块飞入容器范围内的动画

top:40*i+"px", //双重for循环设置方块组合后的位置

left:40*j+"px",

opacity:1

},1000);

}

$("#container").click(function(){ //图片组合后，当容器被点击时，小方块散开，图片解体

for(var i=0;i<9;i++){ //双重for循环再次让方块向四个象限散去

for(var j=0;j<9;j++){

if(j%4==0){

$(bgArr[9*i+j]).animate({

top:parseInt(Math.random()*600)+"px",

left:parseInt(Math.random()*600)+"px",

opacity:0

},1000);

}else if(j%4==1){

$(bgArr[9*i+j]).animate({

top:-parseInt(Math.random()*600)+"px",

left:-parseInt(Math.random()*600)+"px",

opacity:0

},1000);

}else if(j%4==2){

$(bgArr[9*i+j]).animate({

top:parseInt(Math.random()*600)+"px",

left:-parseInt(Math.random()*600)+"px",

opacity:0

},1000);

}else if(j%4==3){

$(bgArr[9*i+j]).animate({

top:-parseInt(Math.random()*600)+"px",

left:parseInt(Math.random()*600)+"px",

opacity:0

},1000);

}

setTimeout(hideBg,1100); //隐藏容器，一定要让容器脱离文档流，否则可能会遮挡住下层的页面信息

});

function hideBg(){ //隐藏容器（包括其中的小方块）

$("#container").hide();

}

CSS :

#container{

position: absolute;

width: 360px;

height: 360px;

z-index: 10000;

top: 100px;

left: 50%;

margin-left: -270px;

display: none;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

.login-bg{

position: absolute;

width: 40px;

height: 40px;

background-image: url("http://sandbox.runjs.cn/uploads/rs/129/s8fsu6r9/login-bg7.png");

background-size: 360px 360px;

opacity: 0;

}

　　小的还是先上图~

　　http://runjs.cn/detail/tl9quyke 这个是效果的demo链接~惭愧，刚开始写博，还不会在这边加demo。正在尝试中……

1.下图是动作开始的图片，小方块从各个位置飞来，组合在一起；

2.下图是小方块组合成的图片；

3.下图是点击图片，小方块散开飞走的效果；

　　刚开始想着做这个效果是因为在北京智能社的主页上看见了这个幻灯片切换效果，当时我对前端，程序员都还没有一点概念。

　　现在自己进入了这个行业，并且已经全日制的学习了4个月时间，所以就试着实现了下这个效果。当然，智能社主页上的要比小弟这个高端不少。

　　下面，我阐述下我这个效果的思路：

　　　　1.既然整个图片容器是由很多小方块组成的，那么容器的宽度，就得是一行小方块加起来的宽度，而高度就是一列小方块的高度和；

　　　　2.给每一个小方块设置背景图片，注意：每个小方块的背景图片，都是一张完整的背景图片，即最后拼成的那张图片；

　　　　3.通过双重for循环，控制每一个方块的初始位置（为了让小方块均匀的分配到4个象限中，我用了4个if判断，代码显得有些冗余），之后它们会从初始位置飞入容器，拼在一起；

　　　　4.在没有设置background-position时，小方块中的图片显示的是一样的，都是图片左上角。要让每个小方块的显示出来的图片拼起来正好是完整的图片，就需要根据这是第X行，第Y个小方块来设置它的background-position，即第X行，第Y个小方块的background-position值应该为：squareWidth*(Y-1)px squareHeight*(X-1)px，如果从循环中的 i , j 参数来看，正好对应！

　　　 5.触发组合事件后，让这些小方块飞过来，根据 i,j 的值飞到各自在图片中的位置，这个位置是按顺序的，所以也很好实现。

　　　　6.散开解体就是反过来就行啦~

　　　　好了，下面我贴出我自己的代码，嘿嘿，虽然代码很初级，可能看上去很低端，不过自己完成了一些喜欢的特效，并且同学们也很喜欢，还是感觉非常开心的。

　　　　最后几天了，加油~Day day up!!!

　　　　下面是html代码：

<button onclick="bomb()">爆发吧！小宇宙！</button>

<div id="container">  //这个是容器

    <div class="login-bg"></div>

    <div class="login-bg"></div>

    <div class="login-bg"></div>

    <!--这里添加你需要的小方块的数量的div，类名为依您喜欢，
     我的示例中是81个方块，所以下面i和j的条件是 “小于9”-->

</div>

　　　　下面是CSS代码：

#container{

    position: absolute;

    width: 360px;

    height: 360px;

    z-index: 10000;

    top: 150px;

    left: 50%;

    margin-left: -270px;

    display: none;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

}

.login-bg{

    position: absolute;

    width: 40px;

    height: 40px;

    background-image: url("login-bg7.png");

    background-size: 360px 360px;

    opacity: 0;

}

　　　　这里是js代码：

var bgArr = $(".login-bg");   //获取所有背景小方块存入数组中

for(var i=0;i<9;i++){          //双重for循环初始化每一个小方块的位置，通过随机数，分别把它们放到4个象限，i控制行，j控制列

    for(var j=0;j<9;j++){

        $(bgArr[9*i+j]).css({           //分别设置每个小方块的背景位置

            backgroundPosition:-40*j+"px "+(-40*i)+"px"

        })

        if(j%4==0){       //将满足条件的小方块放置到第二象限

            $(bgArr[9*i+j]).css({

                top:parseInt(Math.random()*600)+"px",

                left:parseInt(Math.random()*600)+"px"

            });

        }else if(j%4==1){       //将满足条件的小方块放置到第四象限

            $(bgArr[9*i+j]).css({

                top:-parseInt(Math.random()*600)+"px",

                left:-parseInt(Math.random()*600)+"px"

            });

        }else if(j%4==2){           //将满足条件的小方块放置到第三象限

            $(bgArr[9*i+j]).css({

                top:parseInt(Math.random()*600)+"px",

                left:-parseInt(Math.random()*600)+"px"

            });

        }else if(j%4==3){           //将满足条件的小方块放置到第一象限

            $(bgArr[9*i+j]).css({

                top:-parseInt(Math.random()*600)+"px",

                left:parseInt(Math.random()*600)+"px"

            });

        }

    }

}

function bomb(){        //关键函数

    $("#container").show();    //显示背景小方块的容器

    for(var i=0;i<9;i++){

        for(var j=0;j<9;j++){

            $(bgArr[9*i+j]).animate({    //小方块飞入容器范围内的动画

                top:40*i+"px",          //双重for循环设置方块组合后的位置

                left:40*j+"px",

                opacity:1

            },1000);

        }

    }

}

$("#container").click(function(){       //图片组合后，当容器被点击时，小方块散开，图片解体

    for(var i=0;i<9;i++){                 //双重for循环再次让方块向四个象限散去

        for(var j=0;j<9;j++){

            if(j%4==0){

                $(bgArr[9*i+j]).animate({

                    top:parseInt(Math.random()*600)+"px",

                    left:parseInt(Math.random()*600)+"px",

                    opacity:0

                },1000);

            }else if(j%4==1){

                $(bgArr[9*i+j]).animate({

                    top:-parseInt(Math.random()*600)+"px",

                    left:-parseInt(Math.random()*600)+"px",

                    opacity:0

                },1000);

            }else if(j%4==2){

                $(bgArr[9*i+j]).animate({

                    top:parseInt(Math.random()*600)+"px",

                    left:-parseInt(Math.random()*600)+"px",

                    opacity:0

                },1000);

            }else if(j%4==3){

                $(bgArr[9*i+j]).animate({

                    top:-parseInt(Math.random()*600)+"px",

                    left:parseInt(Math.random()*600)+"px",

                    opacity:0

                },1000);

            }

        }

    }

    setTimeout(hideBg,1100);        //隐藏容器，一定要让容器脱离文档流，否则可能会遮挡住下层的页面信息

});

function hideBg(){              //隐藏容器（包括其中的小方块）

    $("#container").hide();　　　

}

　　　　最后这段隐藏容器的时候，如果直接用JQ中的hide立即执行的话，解体的动画来来不及播放就display:none生效了。

　　　　所以我选择了使用setTimeout让 hide() 函数延迟到散开解体动画执行完毕之后再执行。

　　　　这样既有了动画，也将这些方块抽离了文档流，用于图片展示的时候，解体图片后不至于挡住下层的内容。

转自谷笑儿http://www.cnblogs.com/soccerloway/

JS实现有点炫的图片展示效果-图片解体和组合的更多相关文章

CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览源码下载实现的代码. html代码: &l ...
如何用Jquery做图片展示效果
一. 前言到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
html/css 图片展示效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
lightbox图片展示效果
1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
css实现六边形图片（最简单易懂方法实现高逼格图片展示）
不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

随机推荐

安装Django，运行django-admin.py startproject 工程名，后不出现指定的工程解决办法！！
第一次写博客,,,,, 在看我这篇教程的前提是你应该已经正确装好python和Django了,好了,废话不说了,正题走你!你现在是不是很纠结自己运行django-admin.py startpr ...
Android笔记：菜单
1.按键调出菜单 public boolean onCreateOptionsMenu(Menu menu) 重写建立菜单方法 public boolean onOptionsItemSelected ...
3ds max 分离对象
转换为可编辑面片,将编辑环境设置为以下状态: 选中所需面片,分离
js windows对象
一.DOM操作 windows对象操作 document对象操作二.属性.事件 1.window的属性: window.shuxing(属性) window.fangfa()(方法) 方法后 ...
DO语句与SELECT语句,HANDLER语句
DO语句,只执行语句不返回结果:SELECT 既执行语句也返回结果. HANDLER的效率会更好. HANDLER 语句比SELECT 语句更快: 1,HANDLER只需OPEN一次,能重用,不须每次 ...
ios 拨打电话
1,这种方法,拨打完电话回不到原来的应用,会停留在通讯录里,而且是直接拨打,不弹出提示NSMutableString * str=[[NSMutableString alloc] initWithFo ...
服务器知识----IIS架设问题
1,基本配置,应用程序池,路径等. 2,权限设置 Iuser IIS_users 只读权限 3,isapi映射 framework安装目录下运行 aspnet_regiis.exe -i 注 ...
与你相遇好幸运，Waterline初遇
Github : https://github.com/balderdashy/waterline 文档 : https://github.com/balderdashy/waterline-docs ...
Delphi中DLL的创建和使用
参考:http://blog.csdn.net/ninetowns2008/article/details/6311663 结合这篇博客:http://www.cnblogs.com/xumenger ...
【JAVA多线程安全问题解析】
一.问题的提出以买票系统为例: class Ticket implements Runnable { public int sum=10; public void run() { while(tru ...

JS实现有点炫的图片展示效果-图片解体和组合

JS实现有点炫的图片展示效果-图片解体和组合的更多相关文章

随机推荐

热门专题