效果：http://hovertree.com/texiao/jquery/50/
現在許多社區，購物等網站都設置簽到功能，打開可以收獲經驗、虛擬幣等，提高用戶粘性，增加浏覽量，是一個不錯的功能。本文使用jQuery制作了一個簡單的打卡特效。
現在jQuery的應用十分廣泛，這裡提供全部版本的jQuery庫下載：http://hovertree.com/h/bjaf/ati6k7yk.htm
源碼下載：http://hovertree.com/h/bjaf/b5npn5mu.htm
代碼：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery制作每天或每日打卡簽到特效 - 何問起</title>
<meta name="description" content="jquery制作論壇或社交網站的每日或每天打卡簽到特效，點擊打卡標簽顯示打卡簽到效果。jquery下載" />
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
text-decoration: none;
}
/*今日簽到*/
.singer {
border: 1px solid #DCDBDB;
padding: 10px;
height: 45px;
line-height: 45px;
width: 290px;
margin: 20px auto;
}
.singer_l_cont, .singer_r_img {
float: left;
}
.singer_l_cont {
width: 145px;
background: url(http://hovertree.com/texiao/jquery/50/images/sing_per.gif) no-repeat left 12px;
text-indent: 23px;
font-size: 12px;
}
.singer_r_img {
display: block;
width: 114px;
height: 52px;
background: url(http://hovertree.com/texiao/jquery/50/images/sing_week.gif) right 2px no-repeat;
vertical-align: middle;
float: right;
*margin-bottom: -10px;
}
.singer_r_img:hover {
background-position: right -53px;
text-decoration: none;
}
.singer_r_img span {
margin-left: 14px;
font-size: 16px;
font-family: 'Hiragino Sans GB','Microsoft YaHei',sans-serif !important;
font-weight: 700;
color: #165379;
}
.singer_r_img.current {
background: url(http://hovertree.com/texiao/jquery/50/images/sing_sing.gif) no-repeat 0 2px;
}
.hovertreecenter{text-align:center;}
</style>
</head>
<body>
<div class="hovertreecenter"><h2>jquery制作論壇或社交網站的每天打卡簽到特效</h2></div>
<div class="singer">
<div class="singer_l_cont">
<span>每天簽到贏取何幣</span>
</div>
<div class="singer_r_r">
<a class="singer_r_img" href="javascript:;">
<span id="sing_for_number"></span>
</a>
</div>
</div><!--singer end-->
<div class="hovertreecenter"><a href="http://hovertree.com" target="_blank">何問起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/hovertreetrain.htm">查看代碼</a> </div>
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
/*簽到模塊日期捕捉：*/
function week(){
var objDate= new Date();
var week = objDate.getDay();
switch(week)
{
case 0:
week="周日";
break;
case 1:
week="周一";
break;
case 2:
week="周二";
break;
case 3:
week="周三";
break;
case 4:
week="周四";
break;
case 5:
week="周五";
break;
case 6:
week="周六";
break;
}
$("#sing_for_number").html( week );
}
$(document).ready(function(){
week();
$(".singer_r_img").click(function(){
$(this).addClass("current");
})
})
</script>
</body>
</html>