图片颗粒化翻转特效-html代码-BFW代码库

图片颗粒化翻转特效

代码语言：html

所属分类：幻灯片

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <script type="text/javascript">

        window.onload = function() {
            var oBox = document.getElementById('box');
            var R = 4;
            var C = 7;
            for (var r = 0; r < R; r++) {
                for (var c = 0; c < C; c++) {
                    var oSpan = document.createElement('span');
                    oSpan.style.width = oBox.offsetWidth / C + 'px';
                    oSpan.style.height = oBox.offsetHeight / R + 'px';
                    oBox.appendChild(oSpan);
                    oSpan.style.left = c * oSpan.offsetWidth + 'px';
                    oSpan.style.top = r * oSpan.offsetHeight + 'px';
                    oSpan.style.backgroundPosition = '-' + c * oSpan.offsetWidth + 'px -' + r * oSpan.offsetHeight + 'px';

                    oSpan.innerHTML = '<em class="front"></em><em class="back"></em>';
                    oSpan.children[0].style.backgroundPosition = '-' + c * oSpan.offsetWidth + 'px -' + r * oSpan.offsetHeight + 'px';
                    oSpan.children[1].style.backgroundPosition = '-' + c * oSpan.offsetWidth + 'px -' + r * oSpan.offsetHeight + 'px';
                    oSpan.r = r;
                    oSpan.c = c;
                }
            }

            var iNow = 1;

            var bReady = true;

            oBox.onclick = function() {
                var aSpan = oBox.children;

                if (bReady == false) return;
                bReady = false;

                iNow++;


                for (var i = 0; i < aSpan.length; i++) {
                    (function(i) {
                        setTimeout(function() {
                            aSpan[i].style.transition = '1s all ease';
                            aSpan[i].style.transform = 'rotateY(180deg)';

                            if (aSpan.........完整代码请登录后点击上方下载按钮下载查看