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

随机推荐

IOS - 控件的AutoresizingMask属性
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. enum { UIViewAutoresi ...
25个增强iOS应用程序性能的提示和技巧(高级篇)(1)
25个增强iOS应用程序性能的提示和技巧(高级篇)(1) 2013-04-16 14:56 破船之家 beyondvincent 字号:T | T 在开发iOS应用程序时,让程序具有良好的性能是非常关 ...
[Android Pro] Android 4.3 NotificationListenerService使用详解
reference to : http://blog.csdn.net/yihongyuelan/article/details/40977323 概况 Android在4.3的版本中(即API 18 ...
August 15th 2016 Week 34th Monday
Why not discovering as there is glorious faraway scenery? 远方有诗篇,何不去发现? An advertisement of Land Rove ...
Cocoapods的安装报错 - Error installing pods:activesupport requires Ruby version >=2.2.2
1.打开终端 2 移除现有 Ruby 默认源输入以下指令 $gem sources --remove https://rubygems.org/ 3.使用新的源输入以下指令 $gem source ...
PHP面向对象——重写与重载
重写/覆盖 override 指:子类重写了父类的同名方法 class Human{ public function say($name){ echo $ ...
mysql入门语句10条
1,连接数据库服务器 mysql -h host -u root -p xxx(密码) 2,查看所有库 show databases; 3,选库 use 库名 4,查看库下面的表 show ...
NSDatePicker && NSDate
UIDatePicker *datePicker = [[UIDatePicker alloc]init]; datePicker.datePickerMode = UIDatePickerModeD ...
EF – 8.多对多关联
5.6.10 <多对多关联(上)> 时长:9分57秒难度:难 5.6.11<多对多关联(下)> 时长:8分50秒难度:难如果单独地把多对多关联的CRUD拿出来讲,确实比较 ...
Pyqt QListWidget之缩略图列表
QListWidget 可以设置模型setViewMode 当setViewMode值为QListView.IconMode 表示Icon模式以下代码来自Pyqt Example #!/usr/b ...

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

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

随机推荐

热门专题