css3 翻转特效实例翻扑克

发布时间：2020-05-17 20:07:44 作者：elick
来源：网络阅读：2892

css3 翻转特效实例翻扑克

实现点击扑克翻转动画点击其他扑克自动翻回反面

不浪费时间直接上代码

<!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 这篇文章其中一个例子修改而来不太懂的可以先看一下这篇文章

实例下载地址: 我是实例

css3 翻转特效实例 翻扑克

相关阅读

css3 翻转特效实例翻扑克