<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>利用JS实现文字的聚合动画效果</title>

    <style>

        .boxWrap1{width: 160px;height: 417px;position: relative;margin:0px auto;}

        .boxWrap1 img{width: 100%;}

        .boxWrap1 div{background: url(http://itakeo.com/wpimg/2_1.png) no-repeat;background-size: 160px auto; position: absolute; left: 0px;top: 0px;

        }

        .boxWrap1.set div{ opacity: 1!important;

            transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;

            -moz-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;

            -webkit-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;

        }

        .boxSiteWrap{ width: 100%;overflow: hidden;height: auto; background: #000;padding: 140px 0}

        .boxSiteWrap button{cursor:pointer;display: block;font-size: 16px; width: 140px;height: 40px; background: #fff;color: #000;border:none;margin:30px auto;}

    </style>

</head>

<body>

<div class="boxSiteWrap">

    <div class="boxWrap1"></div>

    <button>重新加载</button>

</div>

<script>

    window.addEventListener('load',function(){

        ;(function(){

            function init(){

                var box = document.querySelector('.boxWrap1')

                 var c=4,r=8;

                var w = box.offsetWidth/c,h = box.offsetHeight/r;

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

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

                        var _div=document.createElement('div');

                        var _left = j * w,_top = i * h;

                        _div.style.cssText = 'width:'+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) + 'px ' + (-_top) + 'px';

                        _div.style.transition = _div.style.MozTransition = _div.style.WebkitTransition = 'all '+ Random(1,1.8) +'s ease';

                        _div.style.transform = _div.style.MozTransform = _div.style.WebkitTransform = 'perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'

                        box.appendChild(_div);

                    };

                };

                setTimeout(function(){

                    box.classList.add('set')

                },100);

                function Random(start,end){

                    return Math.random()*(end-start)+start;

                };

            };

            init();

            var flag = true;

            document.querySelector('button').onclick = function(){

                if(flag){

                    document.querySelector('.boxWrap1').classList.remove('set')

                    setTimeout(function(){

                        document.querySelector('.boxWrap1').innerHTML = '';

                        init();

                        flag = true;

                    },1200);

                    flag = false;

                };

            };

        })();

    });

</script>

</body>

</html>

demo:https://controllerone.github.io/demo/piece.html

原文链接：http://itakeo.com/blog/2015/12/14/imgcover/?none=123

js图片碎片效果（移动端也适用）的更多相关文章

  1. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  2. js 图片切换效果

    效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  4. JS图片宽度自适应移动端

    $(function(){ $("#d-intro").find("img").each(function () {                $(this ...

  5. JavaScript仿百度图片浏览效果（转载）

    转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...

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

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  9. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

随机推荐

  1. 如果try中有return那么finally中不要有return不然不会执行try中的return

    public class TryExer { public static void main(String[] args) { String test = test(); System.out.pri ...

  2. android中实现监听的四种方法

    (1)自身类作为事件监听器 package cn.edu.gdmec.s07150745.work5; import android.support.v7.app.AppCompatActivity; ...

  3. vue倒计时：天时分秒

    data数据定义 data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', se ...

  4. csps-s模拟测试62,63Graph,Permutation,Tree,Game题解

    题面:https://www.cnblogs.com/Juve/articles/11631298.html permutation: 参考:https://www.cnblogs.com/clno1 ...

  5. Intel RealSense Depth Camera D435安装ROS 驱动——Ubuntu16.04

    官方教程 软件包下载链接 https://github.com/IntelRealSense/realsense-ros Download/Clone librealsense github repo ...

  6. 我的服装DRP之即时通讯——为WCF增加UDP绑定（应用篇）

    发个牢骚,博客园发博文竟然不能写副标题.这篇既为我的服装DRP系列第二篇,也给为WCF增加UDP绑定系列收个尾.原本我打算记录开发过程中遇到的一些问题和个人见解,不过写到一半发现要写的东西实在太多,有 ...

  7. MUI离线原生打包，利用Android Studio进行原生打包MUI项目

    首先从官网http://www.dcloud.io/ 下载HBuilder,用该软件创建一个HTML5的移动APP项目,具体可去官网查看相应的文档. 接下来就是如何将写好的HBuilder引入到我们的 ...

  8. ArduinoUno和Leonardo的区别

    学习过Arduino的同学对ArduinoUno和Lenardo的不同点会有所了解,但说起具体的区别估计还是很多人答不上来,今天我们就详细解释下Arduino Uno和Leonardo的不同. 我们从 ...

  9. java基础之完数判断

    完数: 完全数(Perfect number),又称完美数或完备数,是一些特殊的自然数.它所有的真因子(即除了自身以外的约数)的和(即因子函数),恰好等于它本身.如果一个数恰好等于它的因子之和,则称该 ...

  10. python 中的 is 方法 总结

    isidentifier: 判断变量名是否合法 iskeyword:是否为内置关键字