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,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

随机推荐

【leetcode】Binary Tree Level Order Traversal I & II
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
【网络】VPN
VPN: 来自百度百科虚拟专用网络的功能是:在公用网络上建立专用网络,进行加密通讯.在企业网络中有广泛应用.VPN网关通过对数据包的加密和数据包目标地址的转换实现远程访问.VPN有多种分类方式,主要 ...
CocoaPods安装教程
Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage CocoaPods是什么? 当你开发iOS应用时, ...
Sql如何自动定时备份数据库
直接上图
[Android Pro] Android下toolbox简介
toolbox是Android 自带的提供shell命令的软件.有点类似于busybox,但功能上好像弱很多.其源码可以从Android source code 中system/core/toolbo ...
MAC下GitHub命令操作
由于GitHub实在太有用了~~ ,各种源代码,开源工程,经常需要下载下来使用和学习,或者自己的代码需要上传之类的,尽管有"GitHub for Mac"工具,但是作为一名程序猿! ...
ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（八）之用 Redis 实现用户在线离线状态消息处理
前言上篇的预告好像是“聊天室的小细节,你都注意到了吗?”.今天也是为那篇做铺垫吧.之前的版本有好多问题,比如:当前登录用户是否合法问题,userid参数如果随便传后台没有验证.还有一个致命的问题,用 ...
UbuntuLinux安装java
jdk1.7,jdk1.8详情,参见:http://www.cnblogs.com/a2211009/p/4265225.html
苹果应用 Windows 申请普通证书和Push 证书 Hbuilder 个推(2)
s上一篇讲述了android 如何打包,这一篇看一下如何IOS下打包在苹果上申请证书,及其麻烦,我写下来,有需要的直接拿走即可: 首先苹果的证书分两种一种是 development 证书,另 ...
继承下public,protected,private访问权限
C++中派生类对基类成员的访问形式主要有以下两种: 1.内部访问:由派生类中新增成员对基类继承来的成员的访问. 2.对象访问:在派生类外部,通过派生类的对象对从基类继承来的成员的访问.今天给大家介绍在 ...

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

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

随机推荐

热门专题