zoukankan      html  css  js  c++  java
  • 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();
    	});
    });
    
    
  • 相关阅读:
    斯特林公式
    高精度算法
    容斥原理
    贪心问题之——Dijkstra最短路
    博弈论
    JavaScript数据类型
    JavaScript变量
    认识JavaScript
    编程语言与计算机
    CSS验证工具
  • 原文地址:https://www.cnblogs.com/lisaShare/p/11170374.html
Copyright © 2011-2022 走看看