<!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. 踩坑记-java mysql 新增获取主键、DIY主键、UUID

    java mysql 获取主键.DIY主键.UUID,简单粗暴,代码如下: mapper.xml insert id="add" parameterType="com.x ...

  2. Android开发 EditText的开发记录

    设置显示内容与隐藏内容 if (isChecked){ editPassword.setTransformationMethod(HideReturnsTransformationMethod.get ...

  3. python中用json存储列表字典等文件操作

    JSON字符串用json.dumps, json.loads JSON文件名用json.dump, json.load 由于需要在脚本重启后依旧能够记住之前所使用的列表内容, 故采用json存储列表文 ...

  4. 淼一淼A+B problem

    鲁迅:这可是道难题呢! 鲁迅:我没说过这话,不过确实在理. 某改题毕,但见LOJ之上有数「A+B」之AC记录.余亦尝闻A+B之趣味无穷,遂兴起而码之. 少顷,AC之,吾心所畅. #include< ...

  5. 【自家测试】2017-12-16　FJOI2016 d1

    1. 所有公共子序列问题(allcs.pas/c/cpp)★问题描述:一个给定序列的子序列是在该序列中删去若干元素后得到的序列.确切地说,若给定序列X= x 1 x 2 ... x m ,则另一序列Z ...

  6. centos7.2安装apache比较简单，直接上代码

    centos7.2安装apache比较简单,直接上代码 1.安装 yum install httpd    2.启动apache systemctl start httpd.service    3. ...

  7. javascript 释放变量

    JavaScript 释放变量 在Javascript是可以使用“delete”来手动删除变量,通过这样的方法让GC(Garbage collection)来回收内存,但在JS中并不是所有的变量都可以 ...

  8. R语言数据预处理

    R语言数据预处理 一.日期时间.字符串的处理 日期 Date: 日期类,年与日 POSIXct: 日期时间类,精确到秒,用数字表示 POSIXlt: 日期时间类,精确到秒,用列表表示 Sys.date ...

  9. 06_jQuery对象初识(四)文档处理

    1. 案例:在ul中添加li标签. append在最后添加 prepend在最前面添加 <ul id="ul"> <li>1</li> < ...

  10. 微信支付URL编解码小方法

    --> 打开chrome --> F12或Fn+F12打开控制台 --> encodeURIComponent("url") --> 回车