js+css 动效+1的效果
点击数值 +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的效果的更多相关文章
- CSS动效集锦,视觉魔法的碰撞与融合(二)
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- JS/CSS 各种操作信息提示效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- CSS动效集锦,视觉魔法的碰撞与融合(一)
前言 在本文中我讲述了7种CSS的动效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
- CSS动效集锦,视觉魔法的碰撞与融合(三)
本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...
- html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
- js+css实现点击回到顶部的效果(最低兼容至ie7)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 【总结】前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- Ansible-Ad_Hoc临时命令的使用
Ad_Hoc临时命令的使用 1.使用场景: 所有的临时获取信息的都可以使用,比如节前健康检查.临时更新配置文件. 2.用法: ansible -i 主机 -m 模块 选项 3.常用的命令选项: -v ...
- PCA分析的疑问
R 与python scikit-learn PCA的主成分结果有部分是反的 通过R和python分别计算出来的PCA的结果存在某些主成分的结果是相反的,这些结果是没有问题的,只是表示这个分量被反转了 ...
- LeetCode 94. 二叉树的中序遍历(Binary Tree Inorder Traversal)
94. 二叉树的中序遍历 94. Binary Tree Inorder Traversal 题目描述 给定一个二叉树,返回它的 中序 遍历. LeetCode94. Binary Tree Inor ...
- ESP32 - GPIO中断触发与事件回调
最近为项目增加了GPIO外部触发中断功能,原理是为GPIO32注册了上升沿触发事件,事件触发后,会向RTOS队列写入数据.在RTOS事件中检测到该队列中有新加入的事件,就读出,并执行相应代码. #de ...
- python 之 面向对象基础(继承与派生,经典类与新式类)
7.2 继承与派生 7.21继承 1.什么是继承? 继承是一种新建类的的方式,在python中支持一个子类继承多个父类.新建的类称为子类或者派生类,父类又可以称为基类或者超类,子类会”遗传“父类的属性 ...
- TCP/IP协议图--网络层中的IP协议
IP(IPv4.IPv6)相当于 OSI 参考模型中的第3层--网络层.网络层的主要作用是"实现终端节点之间的通信".这种终端节点之间的通信也叫"点对点通信". ...
- 第五章 模块之 getpass、sys、os
5.5 getpass 密码不显示(只能在终端运行) 密码不显示(只能在终端运行) import getpasspwd = getpass.getpass('请输入密码:')if pwd == '1 ...
- 【SCALA】3、模拟电路
Simulation package demo17 abstract class Simulation { type Action = () => Unit case class WorkIte ...
- Spring AOP日志实现(一)
前置通知:获取访问的类,访问的方法,带参数和不带参数的 日志表信息描述字段: 获取访问时长:
- 算术 HDU - 6715 (莫比乌斯反演)
大意: 给定$n,m$, 求$\sum\limits_{i=1}^n\sum\limits_{j=1}^m\mu(lcm(i,j))$ 首先有$\mu(lcm(i,j))=\mu(i)\mu(j)\m ...