图片颗粒化翻转特效-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 * o.........完整代码请登录后点击上方下载按钮下载查看