实际上就是多了一个隐藏的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. 用maven来创建scala和java项目代码环境(图文详解)(Intellij IDEA(Ultimate版本)、Intellij IDEA(Community版本)和Scala IDEA for Eclipse皆适用)(博主推荐)

    不多说,直接上干货! 为什么要写这篇博客? 首先,对于spark项目,强烈建议搭建,用Intellij IDEA(Ultimate版本),如果你还有另所爱好尝试Scala IDEA for Eclip ...

  2. win10+GTX1080+Tensorflow1.6安装

    安装参考网站:http://blog.csdn.net/lp654063449/article/details/79340655 依照安装目录依次安装,所需安装包均已下载,在最后的一步中,打开cuda ...

  3. 虹软linux错误

  4. linux安装QQ截图

    本人(壮壮熊)现用系统是ubuntu 12.04 相信用过linux系统的朋友都知道,linux下的截图软件是在不咋的.虽然系统本身有带截图工具,但是却苦于没有办法在截下来的图片上作画圈.写文字说明等 ...

  5. CentOS6.X 系统安装后的基础优化

    特别说明:克隆之后的网卡修改 1 编辑eth0的配置文件:vi /etc/sysconfig/network-scripts/ifcfg-eth0, 删除HWADDR地址那一行及UUID的行如下: H ...

  6. 编译android源码遇到错误及其解决方法

    升级ubuntu的14.04后,android的源码又编译错误了,一下是错误说明赫解决方法: 1.make: *** [out/host/linux-x86/obj/EXECUTABLES/aidl_ ...

  7. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  8. nvm安装最新稳定版node

    安装当前最新的稳定版. nvm install stable

  9. VS设置护眼色

    打开vs2013 选项 环境...如图所示

  10. CF898A Rounding

    题意翻译 给你一个数字,将其“四舍六入”,末尾为5舍去或进位都可,求最终的数字. 题目描述 Vasya has a non-negative integer n n n . He wants to r ...