jQuery實(shí)現(xiàn)數(shù)字自動(dòng)增加或者減少的動(dòng)畫效果示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)數(shù)字自動(dòng)增加或者減少的動(dòng)畫效果。分享給大家供大家參考,具體如下:
效果圖:
1.HTML:
<div class="up"></div> <br> <div class="down"></div>
2.JS:
$(function(){ var obj={ el:$(".up"), max:1000, start:100//增加開始的初始值 } var obj2={ el:$(".down"), max:1000, end:100//減少到最小的值 } up(obj); down(obj2) }) function up(obj){ var item=obj.el; var num=obj.max; var start=obj.start; time2=setInterval(function(){ start++; if(start>num){ start=num; clearInterval(time2); } item.text(start) },1) } function down(obj){ var item=obj.el; var num=obj.max; var min=obj.end; time1=setInterval(function(){ num--; if(num<min){ num=min; clearInterval(time1) } item.text(num) },1) }
可以自行設(shè)定每次增加的大小
問題:
1。要是需要用背景圖片中的數(shù)字替換當(dāng)前顯示的數(shù)字,并且有上下滾動(dòng)的效果怎么做? background-position
2。實(shí)現(xiàn)了問題1的效果之后,如果要最大的位數(shù)最先停止動(dòng)畫,后面的位數(shù)依次停止怎么做?或者開始動(dòng)畫的時(shí)候,最后一位數(shù)開始動(dòng)畫,最大的位數(shù)最后開始動(dòng)畫怎么做?
3。如果數(shù)字增加到千的時(shí)候,在千位之后加逗號(hào),例如:1,000。這又怎么做?
4。怎樣用settimeout
來實(shí)現(xiàn)?settimeout
可以解決動(dòng)畫先后順序,即延遲動(dòng)畫
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題:《jQuery動(dòng)畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化的動(dòng)畫
- jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫效果(附在線演示與demo源碼下載)
- 基于JQuery的數(shù)字改變的動(dòng)畫效果--可用來做計(jì)數(shù)器
- CountUp.js數(shù)字滾動(dòng)插件使用方法詳解
- CountUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)增值效果
- countUp.js實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化效果
- countup.js實(shí)現(xiàn)數(shù)字動(dòng)態(tài)疊加效果
- jquery輕量級(jí)數(shù)字動(dòng)畫插件countUp.js使用詳解
相關(guān)文章
jQuery使用正則表達(dá)式替換dom元素標(biāo)簽用法示例
這篇文章主要介紹了jQuery使用正則表達(dá)式替換dom元素標(biāo)簽的方法,結(jié)合具體實(shí)例形式分析了jQuery正則替換的操作技巧,需要的朋友可以參考下2017-01-01jQuery實(shí)現(xiàn)日期聯(lián)動(dòng)效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)日期聯(lián)動(dòng)效果的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn) 注冊時(shí)選擇閱讀條款 左右移動(dòng)
本篇文章,小編將為大家介紹jQuery實(shí)現(xiàn) 注冊時(shí)選擇閱讀條款 左右移動(dòng),有需要的朋友可以參考一下2013-04-04jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
本文將會(huì)使用jquery實(shí)現(xiàn)以下功能:按下方向鍵時(shí),使層向相應(yīng)的方向平滑移動(dòng)20像素;四個(gè)方向鍵的鍵碼分別是37(左)、38(上)、39(右)和40(下),感興趣的朋友可以了解下2013-01-01jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)凍結(jié)表頭的方法,實(shí)例分析了jQuery擴(kuò)展方法的實(shí)現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下2015-03-03jquery 動(dòng)態(tài)創(chuàng)建元素的方式介紹及應(yīng)用
動(dòng)態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁面加載的時(shí)候最好在頁面加載完后執(zhí)行創(chuàng)建,感興趣的朋友可以了解下2013-04-04用jQuery實(shí)現(xiàn)可輸入多選下拉組合框?qū)嵗a
這篇文章主要介紹了用jquery實(shí)現(xiàn)可輸入多選下拉組合框的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01