通过for循环和背景定位制作图片的显示效果

html部分:

<div id="wrap">
</div>

css部分：

#wrap{
            position: absolute;
            top: 0;
            left: 0;}
        #wrap div{width: 50px;
            height: 50px;
            display: inline-block;
            position:absolute;
            transition: 0.5s;
            opacity: 0.2;}

JavaScript部分：

window.onload = function () {
            var oWrap = document.getElementById('wrap');
            var aDiv = oWrap.getElementsByTagName('div');
            var str = '';

            //通过背景定位将图片拼接在一起
            for (var i=0;i<280;i++){
                str += '<div style="top:' + Math.floor(i/20)*52 +  'px;left:' + i%20*52 + 'px;backgr