你的位置:首页 > Java教程

[Java教程]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>

转自:http://hovertree.com/h/bjaf/41eyinh2.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html