jquery制作论坛或社交网站的每天打卡签到特效

转载

mob604756ef1373 2016-04-20 14:18:00

文章标签 jquery 特效 js html css 文章分类 jQuery 前端开发

现在许多社区，购物等网站都设置签到功能，打开可以收获经验、虚拟币等，提高用户粘性，增加浏览量，是一个不错的功能。本文使用jQuery制作了一个简单的打卡特效。

现在jQuery的应用十分广泛，这里提供全部版本的jQuery库下载：

代码：

<!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>