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中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- 安装rpy2 报错<cdef source string>:23:5: before: blah1 解决办法就是直接下载一个rpy2的轮子
win7上安装rpy2, python环境是3.6.1. 使用pip install rpy2直接安装rpy2,对应的版本时rpy2 3.0.5 报如下错误: ERROR: Complete outp ...
- 虚拟机中windows下制作超级隐藏账户
这篇博客非原创,我只是将很多大佬写的东西理解了一下写了出来. 接下来的实验最好在虚拟机进行,因为可以快照~ 制作隐藏用户可以说是两种方法但是基本操作一样,所以我们穿插着进行一种是隐藏账户,一种是影子账 ...
- JVM(一) 内存结构
JVM内存结构 方法区(JDK8以上叫元空间)和堆为线程共享区,虚拟机栈.本地方法栈及程序计数器为线程独占区, 还有一个没有在下图中体现的叫做直接内存(Direct Memory),不受JVM GC ...
- QT QML之Label, TextField
现在不是去想缺少什么的时候,该想一想凭现有的东西你能做什么.------ 海明威 <老人与海> Label { id: tipLabel width: 120 height: 40 tex ...
- java junit4-JUnit测试报 No socket available 错误
问题描述 JUnit测试报 No socket available 错误 Eclipse进行JUnit测试时,总弹出 No socket available 窗口,导致测试不能进行. 解决方案一: 打 ...
- DateTimeFormatter 的操作与使用 -- 通俗易懂
在上一章我们讲解了LocalDate.LocalTime.LocalDateTime.Instant的操作与使用,下面讲解它们之间是如何进行格式化 DateTimeFormatter这个类它只提供了时 ...
- Python33之类和对象(继承)
一.继承的概念及使用方法 在Python中一个类如果想使用前面一个类所有的方法和属性就需要使用继承 继承的定义 def Class_Child(Class_parent) 这样就可以在子类中使 ...
- PAT甲级 Dijkstra 相关题_C++题解
Dijkstra PAT (Advanced Level) Practice Dijkstra 相关题 目录 <算法笔记>重点摘要 1003 Emergency (25) <算法笔记 ...
- Ubuntu中更改默认的root用户密码,以及怎样修改用户密码
新安装的Ubuntu系统中默认的root用户密码是多少?该怎么修改? 如题,相信许多刚接触Ubuntu系统的新手大多会遇到这个问题,那么我们该如何解决这个问题呢?Ubuntu在安装过程中并没有让我们设 ...
- C++语言类之间的关系
在c++中通过类定义对象,而类与类之间也有着复杂的关系,所以题外话,我能理解到c++的编写者可能就想通过计算机语言去模拟世界万物之间的关系,这篇帖子主要从横向和纵向去讨论类之间关系 而在一个类中想要使 ...