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中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- 在ensp上简单的配置交换机
在ensp中我们经常用到交换机,但是我们还没有配置过,下面我们来学习一下怎样简单的配置交换机的速率,双工模式等. 全双工:同时发送和接收数据 半双工:只能在一个时间做一件事 速率:交换机每秒 ...
- 配置jdbc问题 mysql与IDEA
1.新建lib文件夹,将jar文件导入 2在structure中添加jar文件 3设置url时需要设置时区: import java.sql.Connection;import java.sql.Dr ...
- Deepin安装前分区总结
linux的分区的概念应该这么理解,为某个目录创建/挂载分区,比如为/home创建/挂载到某个分区上: 1.需要/boot分区,1.5G: 2./分区,100G:[会自动创建其他目录如/srv,/ro ...
- 将自己的项目作为jar包发布到maven中央仓库
maven版本是3.5.0,jdk是1.8(注意,不是说项目是1.8就行,必须是环境变量里的也是,不能超过1.8,否则一大堆问题,执行mvn前用javac -version看下版本) 一:先在sona ...
- torch.Tensor和numpy.ndarray
1. torch.Tensor和numpy.ndarray相互转换 import torch import numpy as np # <class 'numpy.ndarray'> np ...
- Guava 工具类之Cache的使用
一.guava cache 介绍 1.介绍 guava cache是Google guava中提供的一款轻量级的本地缓存组件,其特点是简单.轻便.完善.扩展性强,内存管理机制也相对完善. 2.使用缓存 ...
- I2C基础及时序
1.模式 标准模式:达到100Kb/S 快速模式:达到400Kb/S 2.连接图 3.协议 SDA.SCL在空闲的时候为高电平 重点!重点!重点! 4.涉及到多主机仲裁的竞争及时钟信号的同步
- Smart3D飞控&地方坐标系
资源 ContextCapture(原Smart3D)教程 | Wish3D 航测数据处理答疑55问!涉及CC.Pix4D.Photoscan.EPS等常见软件问题_云进行 飞控软件 Smart3D常 ...
- Sping Aop日志实现(六)--日志查询功能
最终效果: 日志查询流程分析: Controller代码: Mapper:
- <a>的javascript+jquery编程实例之删除(定位节点与事件绑定)
相关jquery方法 parent(), remove() //上传图片 article_create.js article_edit.js function uploadAttachment() { ...