<!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. 雷克萨斯-RC

    -型号:RC(双门) -价格:49-59W -动力:2T -变速箱:8挡手自一体 -长宽高:4.70,1.84,1.40 -油箱:66L -发动机:8AR-FTS -大灯:LED

  2. pt-archiver使用

    pt-archiver工具其实就是用来清理,归档数据用的 一.归档前的准备需要配置client字符集为utf-8,如果你用了utf-8的编码,防止归档数据为乱码[client]default-char ...

  3. thinkphp留言板例子（多条件查询）

    登录: login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. 出售一套Unity ARPG手游源码

    项目已经上线,在越南App Store曾经排名第一.客户端Unity C#开发,Android可以热更新,IOS可以更新资源,服务器 C++ + lua开发,文档齐全,欢迎咨询. QQ:7734952 ...

  5. JMeter学习-030-JMeter性能测试常用之事务控制器实例

    通常进行性能测试时,我们一般仅考虑主要的数据返回,不考虑页面渲染所需要的数据(例如:css.js.图片等).但当我们需要衡量打开一个页面(页面渲染完成)的性能时,我们就需要考虑完成页面渲染所需要的图片 ...

  6. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

  7. git 添加 文件到GitHub

    用pycharm写代码,暂时不太了解它的版本控制方式,使用git托管到 GitHub. 1. 在被提交的文件夹下,运行 git  init,初始化git; 2. 添加需要提交的文件, git add ...

  8. tftp 限制ip 限制ip段 或者多个ip段访问

    1 限制单个ip访问 tftp 配置tftp信息 vi /etc/xinetd.d/tftp 在 service tftp配置信息中添加  only_form =ip 重启 service xinet ...

  9. CSS深入理解之margin

      前言   改变容器尺寸   margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table- ...

  10. Drawable和Bitmap区别

    Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...