<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .container {

            padding: 50px;

            border: 1px solid #dddddd;

        }

        .item {

            position: relative;

            width: 30px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="item">

        <span>赞</span>

    </div>

</div>

<div class="container">

    <div class="item">

        <span>赞</span>

    </div>

</div>

<div class="container">

    <div class="item">

        <span>赞</span>

    </div>

</div>

<div class="container">

    <div class="item">

        <span>赞</span>

    </div>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

    $('.item').click(function () {

        adFavor(this);

    });

    function adFavor(self) {

//        var t=$(self)

//        console.log(t)

        var fontSize = 15;

        var top = 0;

        var right = 0;

        var opacity = 1;

        var tag = document.createElement('span');

        $(tag).text('+1');

        $(tag).css('color', 'green');

        $(tag).css('fontSize', fontSize + 'px');

        $(tag).css('position', 'absolute');

        $(tag).css('top', top + 'px');

        $(tag).css('right', right + 'px');

        $(tag).css('opacity', opacity)

        $(self).append(tag)

        var v = setInterval(function () {

            fontSize = fontSize + 5;

            top = top - 5;

            right = right - 5;

            opacity = opacity - 0.2;

            $(tag).css('fontSize', fontSize + 'px');

            $(tag).css('top', top + 'px');

            $(tag).css('right', right + 'px');

            $(tag).css('opacity', opacity);

//            console.log(opacity)

            if (opacity < 0) {

                clearInterval(v);

                $(tag).remove();

//                移除这个标签

//                <span style="color: green; position: absolute; font-size: 45px; right: -30px; top: -30px; opacity: -0.2;">+1</span>

            }

        }, 40);

    }

</script>

</body>

</html>

点赞

python:点赞功能的更多相关文章

  1. ajax点赞功能

  2. 使用C++扩展Python的功能 转自：http://blog.csdn.net/magictong/article/details/8897568#comments

    使用C++扩展Python的功能 环境 VS2005Python2.5.4 Windows7(32位) 简介 长话短说,这里说的扩展Python功能与直接用其它语言写一个动态链接库,然后让Python ...

  3. JavaScript实现评论点赞功能

    通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...

  4. JavaScript cookie操作实现点赞功能

    JavaScript cookie操作实现点赞功能 参考实现原理,但是代码不够简洁,简洁代码参考:js操作cookie 实现一个点赞功能十分简单,主要问题在于不能重复点赞.  若是一个有用户的网站,可 ...

  5. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  6. Python常用功能函数

    Python常用功能函数汇总 1.按行写字符串到文件中 import sys, os, time, json def saveContext(filename,*name): format = '^' ...

  7. 全栈项目|小书架|微信小程序-点赞功能实现

    微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...

  8. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现点赞功能

    效果图 接口分析 通过上面的效果图可以看出,点赞入口主要是在书籍的详情页面. 而书籍详情页面,有以下几个功能是和点赞有关的: 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个. ...

  9. Visual Studio上开发Python六大功能

    Visual Studio上开发Python六大功能 一.整合 Python 直译器 (Interpreter) & 互动视窗 (Interactive) Visual Studio 高度整合 ...

随机推荐

  1. Java工具Eclipse

    一.下载Eclipse 从官网渠道下载或从公司共享软件目录下载均可.    a) http://www.eclipse.org/downloads/eclipse-packages/          ...

  2. FTP传输文件

    感谢其他技术人员的分享.我转发,添加个人使用. public class TransFTP {/// <summary> /// 上传文件 /// </summary> /// ...

  3. quicksort

    快排.... void quicksort(int *a,int left,int right){ if(left >= right){ return ; } int i = left; int ...

  4. Angular2 起步(1)

    1.安装 nodejs(最新稳定版)https://nodejs.org/en/ 安装 typescript npm install -g typescript 安装 angular-cli(关于CL ...

  5. responsive tables

    以上内容原本是整理为ppt格式的,贴过来格式有点乱,请见谅. 其他responsive tables参考: http://gergeo.se/RWD-Table-Patterns/ 3种类型的代码参考 ...

  6. GIT远程仓库地址变更

    将VS2013的解决方案添加到GIT源代码管理后会增加.gitattributes和.gitignore 2个文件以及.git目录 设置远程地址的文件在.git目录下的config文件中 直接修改上图 ...

  7. l段子

    段子简介 L段子起源.L段子是开发者根据市场调查, 用户可在等候列车,飞机,或在公交车上无 聊之余使用本应用.打发无聊的时间,分为段 子,图片,活动和个人中心,用户可根据自己 喜好进入不同的区域.段子 ...

  8. Android中如何查看内存

    文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...

  9. php cUrl模拟登录，cookie保存到文件中

    源码如下: <?php header("Content-Type:text/html;charset=utf-8"); //模拟群友通讯录手机号登录 $curl = curl ...

  10. Leetcode: Line Reflection

    Given n points on a 2D plane, find if there is such a line parallel to y-axis that reflect the given ...