效果：http://hovertree.com/texiao/jquery/50/現在許多社區，購物等網站都設置簽到功能，打開可以收穫經驗、虛擬幣等，提高用戶粘性，增加瀏覽量，是一個不錯的功能。本文使用jQuery製作了一個簡單的打卡特效。現在jQuery的應用十分廣泛，這裡提供全部版本的jQuer ...
效果：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>
轉自：http://hovertree.com/h/bjaf/41eyinh2.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
