实际上就是多了一个隐藏的span标签，内容是+1,配合setInterval实现的动态效果

settings.py 

INSTALLED_APPS = [

   ...

 'app01',   # 注册app

]

STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)  # 现添加的配置,这里是元组，注意逗号

TEMPLATES = [

   ...

   'DIRS': [os.path.join(BASE_DIR, 'templates')],

]

urls.py 

from django.contrib import admin

from django.urls import path

from django.conf.urls import url, include

from app01 import views

urlpatterns = [

   # 点赞效果实现

 url(r'^zan.html', views.zan),

]

views.py 

from django.shortcuts import render, redirect

from app01 import models

# 点赞效果实现

def zan(request):

    return render(request, 'zan.html')

views.py 

from django.shortcuts import render, redirect

from app01 import models

# 点赞效果实现

def zan(request):

    return render(request, 'zan.html')

templates/zan.html 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        div{

            height:100px;

            border:1px solid red;

        }

        .zan {

            height: 35px;

            width: 35px;

            color: black;

            background-color: #ff9dd5;

            position: relative;

            cursor: pointer;

            z-index: 1000;

        }

        .zan span {

            position: absolute;

        }

    </style>

</head>

<body>

    <div class="div1">

        <h3 style="color: #3e40cd">手动设置的+1效果</h3>

        <div class="zan">赞

            <span>+1</span>

        </div>

    </div>

    <div class="div2">

        <h3 style="color: #3e40cd">点击触发的+1效果</h3>

        <div class="zan">赞</div>

    </div>

</body>

<script src="/static/jquery-2.1.4.min.js"></script>

<script>

    // 动态实现+1的效果

    $(function(){

        $(".div2").click(function () {

            var tag_left = 5;

            var tag_top =5;

            var tag_opacity = 1;   // 半透明状况

            var tag_font_size = 12;

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

            tag.innerHTML = "+1";

            tag.style.color = 'green';

            tag.style.fontSize = tag_font_size + 'px';

            tag.style.top = tag_top + 'px';

            tag.style.opacity = tag_opacity;

            tag.style.left = tag_left + 'px';

            $(".div2 .zan").append(tag);

            var obj = setInterval(function () {

                tag_left += 2;

                tag_top -= 2;

                tag_opacity -= 0.1;   // 半透明状况

                tag_font_size += 1;

                tag.style.fontSize = tag_font_size + 'px';

                tag.style.top = tag_top + 'px';

                tag.style.opacity = tag_opacity;

                // tag.style.position = 'absolute';

                tag.style.zIndex = 1002;

                tag.style.left = tag_left + 'px';

                if(tag_opacity<0){

                    clearInterval(obj);

                    tag.remove();

                }

            }, 100)

        })

    })

</script>

</html>

页面显示；

Python学习---抽屉框架分析[点赞功能分析]的更多相关文章

  1. Python学习---抽屉框架分析[点赞功能/文件上传分析]0317

    点赞功能分析 前台传递过来新闻id[new_id]和session[session内有用户ID和用户之间的信息]到后台 后台News数据库内用户和新闻是多对多的关系,查看第三张表中的内容,判读用户Id ...

  2. Python学习---抽屉框架分析[数据库设计分析]180313

    基本的: models.py ####################################以下都是抽屉的代码#################################### fro ...

  3. Python学习---抽屉框架分析[小评论分析]0315

    注: 此处的小评论涉及数据库操作 初级小评论代码 settings.py INSTALLED_APPS = [ ... 'app01', # 注册app ] STATICFILES_DIRS = (o ...

  4. Python学习---抽屉框架分析[ORM操作]180314

    Django ORM操作     1. 字段操作         class User(model.Model);             u=字段        用处:            1 . ...

  5. [TimLinux] Python学习内容框架

    以下内容主体来自<Python学习手册第四版>,大致整理出的方向 1. 第一部分:使用入门 介绍Python语法之前,先对Python的的各个方面进行一个比较宽广的介绍,包含对Python ...

  6. Python学习——web框架

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. WSGI(Web Server Gateway Interface)是一种规范,它定义了使用p ...

  7. 6月12日 python学习总结 框架

    1. 登录功能的实现 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action 2. 所有获取用户输入的表单标签要放在form表单里面,表单标签必须要有 ...

  8. Django学习---抽屉热搜榜分析【all】

    Python实例---抽屉热搜榜前端代码分析 Python实例---抽屉后台框架分析 Python学习---抽屉框架分析[点赞功能分析] Python学习---抽屉框架分析[数据库设计分析]18031 ...

  9. Python实例---抽屉后台框架分析

    1.1. 抽屉框架分析 --登陆注册分析 1.2. 前台获取form表单补充知识: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 64位WIN7上安装11G R2 ，PLSQL的配置方法

    64位WIN7上安装11G R2 ,PLSQL的配置方法:1.       1.1. 去http://www.oracle.com/technetwork/topics/winsoft-085727. ...

  2. 多线程编程(一)-Semaphore(信号量)的使用

    Semaphore的介绍 单词Semaphore的中文含义就是信号.信号系统的意思,此类的主要作用就是限制线程并发的数量. 举个例子,一个屋子里有10个人,但只有一个窄门可以出去,这个窄门一次最多只能 ...

  3. C#(winform)设置窗体的启动位置

    只需要设置窗体的StartPosition属性: registerForm.StartPosition = FormStartPosition.CenterScreen; FormStartPosit ...

  4. Mysql命令行访问

    mysql -h localhost  -u root -p12345 mysql -h 192.168.1.100  -u root -p12345 mysql -h 192.168.1.100  ...

  5. python实例：快速找出多个字典中的公共键

    1.生成随机字典 # 从abcdefg 中随机取出 3-6个,作为key, 1-4 的随机数作为 value s1 = {x : randint(1, 4) for x in sample('abcd ...

  6. 动画性能优化－requestAnimationFrame、GPU等

    最近在做一个场景动画,有一个欢迎界面和一个主动画界面,两个界面之间的连接通过一个进度条来完成,当进度条完成,提供通往主动画的按钮. 画面会从一个个的场景移动过去,用户可通过点击抽奖.查看气泡商铺等进行 ...

  7. [PY3]——过滤数据——列表推导、filter()、itertools.compress()

    问题 你有一个数据序列,想利用一些规则从中提取出需要的值或者是缩短序列 解决方案 最简单的过滤数据的方法,就是使用列表推导. 使用列表推导的一个潜在缺陷就是如果输入非常大的时候会产生一个非常大的结果集 ...

  8. i.mx6 Android5.1.1 Zygote

    0. 总结: 0.1 相关源码目录: framework/base/cmds/app_process/app_main.cppframeworks/base/core/jni/AndroidRunti ...

  9. 举一反三 willDisplayCell在UICollectionView中的一些应用

    一.UICollectionViewCell动画 上一篇博客写仿58同城实现UITableViewCell动画,同样UiCollectionView中也能用,上一个是从右到左的动画还比较好弄, 但如果 ...

  10. DataGrridView 当前行显示不同颜色

    如果想让选中DataGridview的行显示不同颜色,就要通过DataGridview控件RowPerpaint事件中重新设置所选行的DefauleCellStyle属性来实现 private voi ...