• 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

  • 相关阅读:
    安卓 如何载入一个新窗口如何关闭窗口和向另一个窗口传值
    大数相加算法
    JsonTools
    数组、链表、哈希表
    JavaScript, JQuery事件委托
    前端移动端的适配
    JavaScript设置和获取cookie
    WCF、WebAPI、WebService之间的区别
    npm设置成淘宝镜像
    JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value
  • 原文地址:https://www.cnblogs.com/roucheng/p/qiandao.html
Copyright © 2020-2023  润新知