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中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- PHP curl模拟ip和来源进行访问
PHP curl模拟ip和来源进行访问<pre> public function moniurlqingqiu() { $ch = curl_init(); $curlurl = &quo ...
- qt qml Treeview使用记录--设置每个Item的图片logo,高度
这篇帮助很大: https://blog.csdn.net/qq_32116695/article/details/81298585, 代码如下: TreeView { id: viewTree an ...
- PHP 与操作判断奇偶
/** * 判断奇偶数 * @param $n * @return int */ function isOdd($n){ // $a & $b And(按位与) 将把 $a 和 $b 中都为 ...
- WiFi、ZigBee、BLE用哪个?
小米是这么选的: 1) 插电的设备,用WiFi: 2) 需要和手机交互的,用BLE: 3) 传感器用ZigBee. WIFI,WIFI是目前应用最广泛的无线通信技术,传输距离在100-300M,速率可 ...
- php数组指针函数
数组指针函数有reset(),prev(),current(),next(),end(),key(),each() 其中reset(),prev(),current(),next(),end(),都是 ...
- go语言的安装及环境配置
Go语言开发环境搭建(ubuntu) 1.清理.卸载之前的 go 语言环境: 删除go目录:sudo rm -rf /usr/local/go 删除软链接(如果建立了软链接):sudo rm -rf ...
- SQL Server元数据查询
原文:SQL Server元数据查询 1.查询触发器的信息 --查询触发器的信息 select name, --触发器名称 (select name from sys.objects where ob ...
- ABP 基于DDD的.NET开发框架 学习(五)中使用DevExpress插件
1.DevExpress安装 安装步骤1:开始安装 安装步骤2:选择需要安装的模块 安装步骤3:修改安装路径 安装步骤4:正在安装 安装步骤5:安装完成 2.Vs中设置 1)DevExtremeBun ...
- processon使用教程
原文地址:https://www.cnblogs.com/yangliheng/p/6082250.html 一.引言 作为一名IT从业者,不仅要有扎实的知识储备,出色的业务能力,还需要具备一定的软实 ...
- 关于下载gitbash客户端
gitbash的安装包找不到了,最近又在准备新机器的环境,需要安装git客户端. https://www.git-scm.com/,网址找到了,但是下载非常缓慢.搜了一下,都是改host,但是改了也没 ...