效果：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

jquery制作论坛或社交网站的每天打卡签到特效的更多相关文章

  1. 《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本

    第8章 用jQuery打造个性网站 上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接 ...

  2. 国外社交网站获取分享数量APIs

    之前有一篇文章详细介绍了如何获取网页在Facebook,Twitter和LinkedIn社交平台上分享的数量,点击这里查看.这里再扩充一下! Twitter GET URL: http://cdn.a ...

  3. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  4. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  5. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  6. phpwind9.0模板制作教程——制作论坛风格

    由于论坛模板机制和门户等模板机制不同,所以今天我就先重点讲讲论坛模板制作的大概过程. 一.先来熟悉下phpwind9.0的论坛模板机制. 其实phpwind9.0的模板机制和discuzx2.5差不多 ...

  7. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  8. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  9. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

随机推荐

  1. 在.NET Core中遭遇循环依赖问题"A circular dependency was detected"

    今天在将一个项目迁移至ASP.NET Core的过程中遭遇一个循环依赖问题,错误信息如下: A circular dependency was detected for the service of ...

  2. [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类

    [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类 本节导读:本节主要介绍通过序列 ...

  3. 让你的站点也支持MarkDown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

  4. [ASP.NET Web API]如何Host定义在独立程序集中的Controller

    通过<ASP.NET Web API的Controller是如何被创建的?>的介绍我们知道默认ASP.NET Web API在Self Host寄宿模式下用于解析程序集的Assemblie ...

  5. CLR via C# 学习计划

    本书是学习c#的人必读书,计划今年完成,读透. 书是在亚马逊买的,虽然有点小贵,但是为了情怀,咬咬牙买了. 需要学习的: CLR基础 (CH1-CH3) 设计类型 (CH4-CH13) 基本类型 (C ...

  6. C/C++预处理指令#define,#ifdef,#ifndef,#endif…

    2016年12月29日更新: 今天查看以前文件的时候, 突然发现了#error 这个预处理指令.然后回想一下工作, 发现这个指令使用场景还是很多的.比如: 一个项目的模块儿之多,源文件之大,代码之多, ...

  7. xamarin UWP ActivityIndicator

    在xamarin的UWP平台使用ActivityIndicator时,如果你时后台创建的这个对象,请设置他的宽度,不然在UWP平台下会发现找不这个对象,其实是在这个平台和特点版本下的宽度没设置,导致有 ...

  8. sql复习第四次

    1.关系操作的特点是集合操作 2.关系模型的完整性规则包括实体完整性规则,参照完整性规则,用户定义的完整性规则 3.rou联接运算是由笛卡儿积和选择操作组合而成的 4.自然联接运算是由笛卡儿积,选择, ...

  9. VS代码提示不出现或者提示变成英文或者各种奇葩问题的解决

    万能法==>重置 代码提示变成英文的了 打开开发员命令提示 输入:devenv.exe /setup /resetuserdata /resetsettings 重新打开,会和你第一次安装完毕一 ...

  10. jQuery 2.0.3 源码分析 数据缓存

    历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放 ...