封装一个layui组件---js实现数字翻牌器效果

封装一个layui组件—js实现数字翻牌器效果

layui.define(["jquery"], function (exports) {var $ = layui.jquery;var numberAnimate = function (setting) {var defaults = {speed: 1000, //动画速度num: "", //初始化值iniAnimate: true, //是否要初始化动画效果symbol: '', //默认的分割符号，千，万，千万dot: 0 //保留几位小数点}//如果setting为空，就取default的值var setting = $.extend(defaults, setting);var _this = setting.selector;//如果对象有多个，提示出错if ($(_this).length > 1) {return;}//如果未设置初始化值。提示出错if (setting.num == "") {return;}var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\<span class="mt-number-animate-span">0</span>\<span class="mt-number-animate-span">1</span>\<span class="mt-number-animate-span">2</span>\<span class="mt-number-animate-span">3</span>\<span class="mt-number-animate-span">4</span>\<span class="mt-number-animate-span">5</span>\<span class="mt-number-animate-span">6</span>\<span class="mt-number-animate-span">7</span>\<span class="mt-number-animate-span">8</span>\<span class="mt-number-animate-span">9</span>\</div>';//数字处理var numToArr = function (num) {if (!new RegExp("[°′]", "g").test(num)) {num = parseFloat(num).toFixed(setting.dot);}if (typeof (num) == 'number') {var arrStr = num.toString().split("");} else {var arrStr = num.split("");}return arrStr;}//设置DOM symbol:分割符号var setNumDom = function (arrStr) {var shtml = '<div class="mt-number-animate">';for (var i = 0, len = arrStr.length; i < len; i++) {if (i != 0 && (len - i) % 3 == 0 && setting.symbol != "" && arrStr[i] != ".") {shtml += '<div class="mt-number-animate-dot">' + setting.symbol + '</div>' + nHtml.replace("{{num}}", arrStr[i]);} else {shtml += nHtml.replace("{{num}}", arrStr[i]);}}shtml += '</div>';return shtml;}//执行动画var runAnimate = function ($parent) {var parent = $parent.parent();var numDoms = $parent.find(".mt-number-animate-dom")if (numDoms.length===2){parent.css({'width':"50%"})} else if(numDoms.length===3){parent.css({'width':"66%"})}else if(numDoms.length===4){parent.css({'width':"88%"})}numDoms.each(function () {var num = $(this).attr("data-num");//number-wrapvar spanHei = $(_this).height() ; //10为元素个数var thisTop = -num * 50 + "px";if (thisTop != $(_this).css("top")) {if (setting.iniAnimate) {//HTML5不支持if (!window.applicationCache) {$(this).animate({top: thisTop}, setting.speed);} else {$(this).css({'transform': 'translateY(' + thisTop + ')','-ms-transform': 'translateY(' + thisTop + ')',/* IE 9 */'-moz-transform': 'translateY(' + thisTop + ')',/* Firefox */'-webkit-transform': 'translateY(' + thisTop + ')',/* Safari 和 Chrome */'-o-transform': 'translateY(' + thisTop + ')','-ms-transition': setting.speed / 1000 + 's','-moz-transition': setting.speed / 1000 + 's','-webkit-transition': setting.speed / 1000 + 's','-o-transition': setting.speed / 1000 + 's','transition': setting.speed / 1000 + 's'});}} else {setting.iniAnimate = true;$(this).css({top: thisTop});}}});}//初始化var init = function ($parent) {//初始化$parent.html(setNumDom(numToArr(setting.num)));runAnimate($parent);};//重置参数_this.resetData = function (num) {var newArr = numToArr(num);var $dom = $(_this).find(".mt-number-animate-dom");if ($dom.length < newArr.length) {$(_this).html(setNumDom(numToArr(num)));} else {$dom.each(function (index, el) {//给自定义属性赋值$(_this).attr("data-num", newArr[index]);});}runAnimate($(this));}//initinit($(_this));return _this;}exports('numberAnimate', numberAnimate);
});

封装一个layui组件---js实现数字翻牌器效果相关推荐

Vue实现数字翻牌器效果
<template><div><div class="head" @click="this.numFun(0,5000)"> ...
大数据可视化——dataV，Echarts，蚂蚁金服L7世界地图引入，数字翻牌器，全屏，自定义排名轮播表
目录 L7相关概念构造函数Scene PointLayer 基本用法 shape 类型 style tips 地图事件 Popup信息框 option 方法:setLnglat 方法:setDOMC ...
Vue大屏实战一：数字翻牌器的实现
文章目录 1.效果预览 2.数字翻牌器的实现 3.vue项目中引入DataV 4.大屏顶部翻牌器布局 5.大屏数字翻牌器样式 6.大屏数字翻牌器逻辑实现 1.效果预览页面整体效果如下顶部的数字翻牌 ...
封装vue版数字翻牌器
封装vue版数字翻牌器 <template> <div class="number"> <ul id="dataNums"> ...
基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
DataV 数字翻牌器组件 dv-digital-flop 数字0不显示问题解决
问题: 在项目上线时我们会为了减少项目体积选择使用cdn链接将项目中用到的组件插件从打包的结构中剔除,在最近的项目中发现 DataV组件库出现了问题,使用cdn链接时出现,数字翻牌器组件当confi ...
JS实现数字翻牌效果
JS实现数字变化翻牌效果一.效果图如下: 二.代码如下: 注意:需要引入JQuery.js. <!DOCTYPE html> <html lang="en"&g ...
【前端3分钟】写一个数字翻牌器
在做效果的时候,想要表现一个数字数据的动态变化,例如金额增加,此时我们就可以使用数字翻牌器来表现.当然,你也可以使用其他效果来表现. 下面我们就来实现,注意一点: 数字的增加 <!DOCTYPE ...
如何封装一个vue组件（获取手机验证码的组件）
如何封装一个vue组件(获取手机验证码的组件) 定义一个名为 item-time 的新组件,这是获取手机验证码的组件 Vue.component('item-time', {props: ['maxt ...

封装一个layui组件---js实现数字翻牌器效果

封装一个layui组件---js实现数字翻牌器效果相关推荐

最新文章

热门文章