css3 翻转特效实例翻扑克

2025-02-19 技术教程

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

不浪费时间直接上代码

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

实例下载地址: 我是实例