点击数值 +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. 好消息!iconfont+开始支持彩色图标

    想必关注iconfont的同学都知道,iconfont最近做出了一次重大升级,升级成为iconfont+了,而这次更新,iconfont+居然开始支持彩色图标,这意味着我们能够使用更具有特色更形象的全 ...

  2. Python 机器学习库 NumPy 教程

    0 Numpy简单介绍 Numpy是Python的一个科学计算的库,提供了矩阵运算的功能,其一般与Scipy.matplotlib一起使用.其实,list已经提供了类似于矩阵的表示形式,不过numpy ...

  3. LeetCode 637. 二叉树的层平均值(Average of Levels in Binary Tree)

    637. 二叉树的层平均值 637. Average of Levels in Binary Tree LeetCode637. Average of Levels in Binary Tree 题目 ...

  4. [SourceTree] - 使用内置 PuTTY 克隆项目出现 fatal: early EOF 问题之解决

    背景 使用 PuTTY 克隆 Asp.Net Core 项目失败. 错误 git -c filter.lfs.smudge= -c filter.lfs.required=false -c diff. ...

  5. 转:Cesium 和 Webpack

    原文地址:https://www.jianshu.com/p/85917bcc023f 注意:webpack 和 webpack-cli 的安装参考 https://www.cnblogs.com/m ...

  6. Python中关于Lambda函数的使用总结

    lambda表达式是一种匿名函数,对应python中的自定义函数def,是定义某个函数时比较高级的一种写法.作为python初学者,本文整理了lambda的一些基本用法和特点. lambda和def的 ...

  7. python技巧 — Chrome浏览器中的 XPath Helper

    用于XPath 爬取网页结构的时候使用, 安装后 快捷键调用 左边 ctrl+ shift+x 启动 安装流程: 1. 打开chrome浏览器,扩展程序 .搜索 XPath Helper 下载安装(前 ...

  8. Python2和3字符编码的区别

    Python2和3字符编码的区别 一.字符编码应用之Python 1.1 执行Python程序的三个阶段 Python test.py(我再强调一遍,执行test.py的第一步,一定是先将文件内容从硬 ...

  9. Spring AOP日志实现(一)

    前置通知:获取访问的类,访问的方法,带参数和不带参数的 日志表信息描述字段: 获取访问时长:

  10. interface Part1(接口详解)

    1. 在日常生活中,手机.笔记本电脑.平板电脑等电子产品提供了不同类型的接口用于充电或者连接不同的设备. 不同类型接口的标准不一样,例如电压.尺寸等. 2. 在C#语言中,接口也会定义一种标准,如果需 ...