jquery+css实现钱袋点击撒金币动画效果代码-html代码-BFW代码库

jquery+css实现钱袋点击撒金币动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery+css实现钱袋点击撒金币动画效果代码

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.4.1.1.css">
    <style type="text/css">
        .main{width:200px;margin:0 auto;}.item1{height:150px;position:relative;padding:30px;text-align:center;-webkit-transition:top 1.2s linear;transition:top 1.2s linear;}.item1 .kodai{position:absolute;bottom:0;cursor:pointer;}.item1 .kodai .full{display:block;}.item1 .kodai .empty{display:none;}.item1 .clipped-box{display:none;position:absolute;bottom:40px;left:80px;height:540px;width:980px;}.item1 .clipped-box img{position:absolute;top:auto;left:0;bottom:0;-webkit-transition:-webkit-transform 1.4s ease-in,background 0.3s ease-in;transition:transform 1.4s ease-in;}
    </style>
</head>

<body style="padding:100px 0 0 0;">
    <div class="main">
        <div class="item1">
            <div class="kodai">
                <img src="//repo.bfw.wiki/bfwrepo/images/lottery/kd2.png" class="full" />
                <img src="//repo.bfw.wiki/bfwrepo/images/lottery/kd1.png" class="empty" />
            </div>
            <div class="clipped-box"></div>
        </div>
        <p id="html"></p>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
    (genClips = function () {
        $t = $('.item1');
        var amount = 5;
        var width = $t.width() / amount;
        var height = $t.height() / amount;
        var totalSquares = Math.pow(amount, 2);
        var y = 0;
        var index = 1;
        for (var z = 0; z <= (amount * width) ; z = z + width) {
            $('<img class="clipped" src="//repo.bfw.wiki/bfwrepo/images/lottery/jb' + index + '.png" />').appendTo($('.item1 .clipped-box'));
            if (z === (amount * width) - width) {
                y = y + height;
                z = -width;
            }
            if (index >= 5) {
                index = 1;
            }
            index++;
            if (y === (amount * height)) {
                z = 9999999;
            }
        }
    })();
    function rand(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var first = false,
        clicke.........完整代码请登录后点击上方下载按钮下载查看