<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery扑克洗牌翻转效果代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="projects">
<div class="grid">
<div class="projects">
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="project ">
<div class="mask">
<div class="back"></div>
<div class="front"></div>
</div>
</div>
<div class="controls">
<span class="bottom"></span>
<span class="bottom"></span>
<span class="bottom"></span>
<div class="mask">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.controls').click(function(){
if($(this).hasClass('show')){
$(this).removeClass('show');
subMove();
}else{
$(this).addClass('show');
addMove();
}
})
})
function addMove(){
$('.project').each(function(index,item){
setTimeout(function(){
$(item).addClass('ani'+ index);
},index*300);
})
}
function subMove(){
$('.project').each(function(index,item){
$(item).removeClass('ani'+ index);
})
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery扑克洗牌翻转效果代码.zip
版权申诉
188 浏览量
2022-11-21
11:32:59
上传
评论
收藏 160KB ZIP 举报
jQuery扑克洗牌翻转效果代码.zip （8个子文件） 
jQuery扑克洗牌翻转效果代码 jiaoben4805 
jquery.js 252KB
project_card_bot_bg.png 305B project_front_bg.png 11KB
index.html 3KB project_card_bg.png 8KB project_back_bg.png 3KB index.css 5KB
jQuery扑克洗牌翻转效果代码.jpg 82KB资源评论
