jquery制作论坛或社交网站的每天打卡签到特效
效果：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>
