<!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. Struts2 输入格式自动校验的一些注意事项

    Struts2 在配置格式校验的文件的时候,格式是XXAction-validation.xml,具体如下. 需要注意的是: field的name属性的值,必须要和jsp中表单提交的name一致.千万 ...

  2. 阿里云服务器Linux CentOS安装配置（三）yum安装mysql

    阿里云服务器Linux CentOS安装配置(三)yum安装mysql 1.执行yum安装mysql命令:yum -y install mysql-server mysql-devel 2.启动mys ...

  3. Linq分组

    1.lin语句 int[] nums = { 5, 4, 1, 3, 9, 8, 6, 7, 2, 0, 3 }; DataTable table = new DataTable("Numb ...

  4. Cookie和Session的区别详解

    本文引用自:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一 ...

  5. Python先合并再排序

    前几天遇到的美团笔试题 题目:大概要求输入两组数字,对这两组数值排序然后输出结果 思路:输入两组数,合并两组数,排序 list1 = raw_input("input some number ...

  6. http工作流程

    一次HTTP操作称为一个事务,其工作过程可分为四步:1)首先客户机与服务器需要建立连接.只要单击某个超级链接,HTTP的工作开始.2)建立连接后,客户机发送一个请求给服务器,请求方式的格式为:统一资源 ...

  7. Linq to Sql : 并发冲突及处理策略

    原文:Linq to Sql : 并发冲突及处理策略 1. 通过覆盖数据库值解决并发冲突 try { db.SubmitChanges(ConflictMode.ContinueOnConflict) ...

  8. java编程题

    第一题:输入字符串长度len1,字符串s1,字符串长度len2,字符串s2.从后向前比较,以最短字符串为标准,输出不同的元素的个数. 例如:    输入:s1="1,3,5"   ...

  9. 2003-can't connect to mysql server on 'localhost'(10061) MySQL错误

    开始遇到这个问题,我以为是服务没链接,在网上查了下错误,但没解决,后来链接了下端口,结果发现我原来我 端口不对,MySQL端口默认是3306我安装时端口是设的3307.希望能帮到遇到这种问题的人

  10. Nginx+uwsgi安装配置

    一.安装基础开发包 yum groupinstall "Development tools" yum install zlib-devel bzip2-devel pcre-dev ...