点击数值 +1 的动效

vue

data:{
timer: null,plus:''// 次数
}
method:{
animate(plus) {
var _this = this;
clearInterval(_this.timer);
_this.timer = setInterval(function () {
plus--;
if (plus <= 0) {
clearInterval(_this.timer)
}
var $i = $("<i>+1</i>");
$('.popularity-values').append($i);
$i.animate({
"top": '-1.1rem',
"right": '-0.9rem',
// "top": '-55px',
// "right": '-45px',
"opacity": 0.1,
"fontSize": '0.46rem'
}, 1800, function () {
$i.remove();
});
}, 800)
}
}
jQ 点击 +1 动效
jQuery(document).ready(function ($) {
$("html,body").click(function (e) {
// var n = Math.round(Math.random() * 100);
var n = 1;
var $i = $("<b/>").text("+" + n);
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"color": "#E94F06"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
}, 1500, function () {
$i.remove();
});
e.stopPropagation();
});
});

js+css 动效+1的效果的更多相关文章

  1. CSS动效集锦,视觉魔法的碰撞与融合(二)

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  2. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. css动效库animate.css和swiper.js

    animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...

  4. CSS动效集锦,视觉魔法的碰撞与融合(一)

    前言 在本文中我讲述了7种CSS的动效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...

  5. CSS动效集锦,视觉魔法的碰撞与融合(三)

    本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...

  6. html+js(swiper.js)+css左右滑动切换页面效果,适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

  7. js+css实现点击回到顶部的效果(最低兼容至ie7)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 前端必须收藏的CSS3动效库!!!

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  9. 【总结】前端必须收藏的CSS3动效库!!!

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

随机推荐

  1. 用pytorch1.0搭建简单的神经网络:进行多分类分析

    用pytorch1.0搭建简单的神经网络:进行多分类分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib ...

  2. [转帖]是什么阻止了在18寸(450mm)晶圆上生产芯片?

    是什么阻止了在18寸(450mm)晶圆上生产芯片? https://news.cnblogs.com/n/644247/ 投递人 itwriter 发布于 2019-10-16 14:32 评论(0) ...

  3. git使用mvn clean install 报错原因排查

    使用命令行git-bath.exe 来拉代码并进行编译之类的服务,结果在拉依赖时一直报错连的是144.131.254.26,看了maven的setting配置 文件 没并没有错, 最终定位问题是 gi ...

  4. Android持久化存储——(包含操作SQLite数据库)

    <第一行代码>读书手札 你可能会遇到的问题:解决File Explorer 中无显示问题 Android中,持久化存储,常见的一共有三种方法实现 (一.)利用文件存储 文件存储是Andro ...

  5. php异常处理面向对象和面向函数使用

    要使用异常,首先得知道那些部分会产生异常,产生什么类型异常(php常见异常见下方符表),对产生的异常该怎么办. 如果知道程序的那些部分会产生异常,那么就对这一部分使用try关键字: 如果知道了产生异常 ...

  6. 虚拟机VMware中安装Ubuntu18.04

    准备工作 Ubuntu 获取地址: 官网 清华镜像站 VMware 获取地址链接 安装过程 Vmware的安装过程此处不在赘述,不清楚如何安装的请自行百度,参见VMware14安装教程 然后就是Vmw ...

  7. vue npm run build 失败

    之前删除过 node-moudel 文件夹,然后 npm install 重新安装,一切OK.打包的时候,报错,找不到caniuse什么的.再删除node-moudel,重新cnpm install ...

  8. flutter从入门到精通五

    在flutter的世界里,一切都是Widget,图像,文本,布局模型等等,一切都是Widget flutter中,尽量将Widget放在MaterialApp.其封装了所需要的一些Widget,Mat ...

  9. ActiveX控件的注册和反注册

    原文转自 https://blog.csdn.net/piaopiaopiaopiaopiao/article/details/41649495 ActiveX控件,需要注册之后才能使用. 注意:注册 ...

  10. windows下批处理保留指定日期下的文件

    @echo offchcp 65001setlocal enabledelayedexpansion ::设置操作路径set "pic_dir=D:\465"echo 开始清理.. ...