<!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. mvc学习（二）

    1.后台foreach 与 html的关系 <table border="1">@for (var i = 0; i < 10; i++){@Html.Raw(i ...

  2. Symbols

    https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/ <script> function w(wcon) { console.lo ...

  3. OpenGL中实现双缓冲技术

    在OpenGL中实现双缓冲技术的一种简单方法: 1.在调用glutInitDisplayMode函数时, 开启GLUT_DOUBLE,即glutInitDisplayMode(GLUT_RGB | G ...

  4. selenium python 安装

    环境为Win64位系统,默认已经安装python2.7到D:\Python27,此次使用的浏览器为chrome 下面是selenium的安装和chromedriver.exe的下载 1.安装selen ...

  5. chrome 'adobe flash player 已过期'解决方法

    http://labs.adobe.com/downloads/flashplayer.html下载 WindowsDownload Flash Player for Opera and Chromi ...

  6. golang: 常用数据类型底层结构分析

    虽然golang是用C实现的,并且被称为下一代的C语言,但是golang跟C的差别还是很大的.它定义了一套很丰富的数据类型及数据结构,这些类型和结构或者是直接映射为C的数据类型,或者是用C struc ...

  7. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

  8. ajax交互方法实现

    AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  9. Java基础——基本类型和包装类、基本类型和字符串之间的转换

    基本类型和包装类之间的转换 基本类型和包装类之间经常需要互相转换,以 Integer 为例(其他几个包装类的操作雷同哦): 在 JDK1.5 引入自动装箱和拆箱的机制后,包装类和基本类型之间的转换就更 ...

  10. iOS,手势识别简单使用

    1.iOS目前支持的手势识别(6种) 2.点按手势和慢速拖动手势简单使用 iOS目前支持的手势识别(6种) UITapGestureRecognizer(点按) UIPinchGestureRecog ...