<!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. Android--ListView与数据绑定(Xamarin)

    ListView 控件是一个条目容器, 用于显示集合对象(如数组, List<T>, ObservableCollection<T>等)的每一个条目, 并提供滚动功能. 列表视 ...

  2. sql小技巧

    --实际只会更新一条.可有效防止误操作.特别是操作线上正式数据时. UPDATE TOP(1) Table2 SET Culumn1='value'WHERE id IN(269102,269104) ...

  3. Python 打包工具cx_freeze 问题记录及解决办法

    在节前的最后一天,解决了打包过程中遇到的所有问题,可以成功运行了!真是个好彩头,希望新的一年一切顺利! 以下是在使用cx_freeze过程中遇到的问题及解决办法(Win7) 问题描述:运行exe,启动 ...

  4. 页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题

    由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...

  5. Createjs学习一

    需求1:根据后端返回过来的不同信息,实现长按保存图与文字片功能(图片都是一样的,文字信息不同) 首先我们来分析一下要求,得出需要用到哪些技术.长按保存这一功能只针对图片,文字长按的话只会出现复制.. ...

  6. QT socket相关

    #include<QtNetwork/QTcpSocket>#include<QtNetwork/QTcpServer> 1.服务器端 void About::init_tcp ...

  7. kafka windows环境搭建 测试

    http://www.cnblogs.com/alvingofast/p/kafka_deployment_on_windows.html 照着例子搭建成功

  8. 使用CXF框架集成Spring实现SOAP Web Service

  9. itertools模块

    itertools模块中有很多函数,返回的是一个迭代器 参考: http://www.wklken.me/posts/2013/08/20/python-extra-itertools.html#_1

  10. VS工程添加资源文件

    1. 添加资源文件: 2. 资源文件内写相应代码: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006 ...