css3 翻轉特效實例翻撲克

時間 2021-08-13

標籤 javascript css html java jquery web ide 動畫 this spa 欄目 CSS 简体版

原文原文鏈接

實現點擊撲克翻轉動畫點擊其餘撲克自動翻回反面 javascript

不浪費時間直接上代碼css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>翻撲克</title>
<link rel="stylesheet" href="animate.css" type="text/css" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
.box {
    width: 355px;
    height: 500px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 10px;
    position: relative;
}
.list {
    position: absolute;
}
li {
    float:left;
    list-style:none;
}
</style>
<script>
$(function(){
// 上一個撲克  撲克正面  撲克背面
var old;
var pBack = "http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png";
var pFront = "http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-k.png";
    $(".box").bind("click", function() {
                              
        if(old == null){
            old =  this;
        }else if(old != null  && old != this){
            mRotate($(old));
            old = this;
        }else{
            old = null;
        }
        var self = $(this);
        mRotate(self);
                              
});
function mRotate(self){
        self.find(".list").addClass("out").removeClass("in");
        setTimeout(function() {
            if(self.find(".list").find("img").attr("src") == pBack ){
                self.find(".list").find("img").attr("src",pFront);
            }else{
                self.find(".list").find("img").attr("src",pBack);
                }
            self.find(".list").addClass("in").removeClass("out");
        }, 225);
    }
    return;
                          
})
</script>
</head>
<body>
<ul>
<li>
<div class="box viewport-flip" title="點擊翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="紙牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="點擊翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="紙牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="點擊翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="紙牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="點擊翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="紙牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="點擊翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="紙牌背面" /></a>
</div>
</li>
</ul>
</body>
</html>

這個實例是根據 web上漸進使用jQuery Mobile中animate相關CSS 這篇文章其中一個例子修改而來不太懂的能夠先看一下這篇文章 html

實例下載地址: 我是實例java