<!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. POJ3321Apple Tree

    Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 39566 Accepted: 11727 Descript ...

  2. var、fucntion关键字优先级问题

    情况1:使用var关键字定义的变量优先被声明 console.log(a);    // undefined var a = 20; /* var a =20; (1)声明变量a --  优先被执行, ...

  3. 03.MyBatis的核心配置文件SqlMapConfig.xml

    SqlMapConfig.xml中配置的内容和顺序如下: properties(属性) settings(全局配置参数) typeAliases(类型别名) typeHandlers(类型处理器) o ...

  4. xcart小数点位数

    xcart小数点的位数默认是2位,有时候需要根据需要更改位数:一开始以为把数据库中的数据类型的位数更改过后,就能生效,结果发现xcart在程序中作了限制,只能是2位.那么只能通过更改程序的方式来更改了 ...

  5. php7 mysql_pconnect() 缺失 解决方法

    php7 兼容 MySQL 相关函数 PHP7 废除了 ”mysql.dll” ,推荐使用 mysqli 或者 pdo_mysql http://PHP.net/manual/zh/mysqlinfo ...

  6. Eclipse连接android模拟器

    1.打开eclipse 2.打开MuMu模拟器 3.去到MuMu模拟器 adb_server.exe 文件所在目录:(我的:I:\Android\mumu\emulator\nemu\vmonitor ...

  7. 线性dp——求01串最大连续个数不超过k的方案数，cf1027E 好题！

    只写了和dp有关的..博客 https://www.cnblogs.com/huyufeifei/p/10351068.html 关于状态的继承和转移 这题的状态转移要分开两步来做: 1.继承之前状态 ...

  8. 图书-技术-SpringBoot：《Spring Boot2 + Thymeleaf 企业应用实战》

    ylbtech-图书-技术-SpringBoot:<Spring Boot2 + Thymeleaf 企业应用实战> <Spring Boot 2+Thymeleaf企业应用实战&g ...

  9. PAT甲级题目1-10(C++)

    1001 A+B Format(20分) Calculate a+b and output the sum in standard format -- that is, the digits must ...

  10. java流对象

    Java和C++都是静态类型的面向对象编程语言 stream结尾都是字节流,reader和writer结尾都是字符流 区别: 就是读写的时候一个是按字节读写,一个是按字符. 实际使用通常差不多. 在读 ...