jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果(附在線演示與demo源碼下載)

更新時間：2015年12月31日 11:33:43 作者：sucaijiayuan

這篇文章主要介紹了jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果,并附帶在線演示與demo源碼供讀者下載.涉及jQuery鼠標事件響應(yīng)及基于animate動畫效果實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果。分享給大家供大家參考，具體如下：

運行效果截圖如下：

點擊此處查看在線演示。

完整實例代碼點擊此處本站下載。

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery實現(xiàn)點贊數(shù)字累加動畫效果</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";}
.tip{text-align:center;padding-top:10%;font-size:2em;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("html,body").on("click",function(e){
  anp(e);
})
function anp(e){
  var n=Math.round(Math.random()*10);
  var $i=$("<b>").text("+"+n);
  var x=e.pageX,y=e.pageY;
  $i.css({top:y-20,left:x,position:"absolute",color:"#E94F06"});
  $("body").append($i);
  $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){
    $i.remove();
  });
  e.stopPropagation();
}
</script>
</head>
<body>
<div class="tip">點擊頁面任意位置查看效果</div>
</body>
</html>

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jquery操作Select 簡單方便一個js插件搞定
Jquery其實本身可以操作select表單，但是由于比較反鎖，沒有.net 控件那樣去操作方便，我在網(wǎng)上Google了一會，發(fā)現(xiàn)了一個不錯的專門操作select的插件，很好，使用過了，感覺蠻不錯的。
2009-11-11
jQuery動態(tài)移除與增加onclick屬性的方法詳解
這篇文章主要介紹了jQuery動態(tài)移除與增加onclick屬性的方法,結(jié)合實例形式分析了jQuery使用attr與removeAttr方法針對元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-06-06
使用jQuery獲得內(nèi)容以及內(nèi)容的屬性
本文給大家分享的是一則使用jQuery獲得內(nèi)容以及內(nèi)容的屬性的方法和示例，非常實用，推薦給大家。
2015-02-02
jquery mobile實現(xiàn)撥打電話功能的幾種方法
在做一個便民服務(wù)電話，用到移動web中列出的電話，點擊需要實現(xiàn)調(diào)用通訊錄，撥打電話功能，有需要的朋友可以參考一下
2013-08-08
jQuery點擊彈出下拉菜單的小例子
這篇文章介紹了jQuery點擊彈出下拉菜單的小例子，有需要的朋友可以參考一下
2013-08-08
基于MVC3方式實現(xiàn)下拉列表聯(lián)動(JQuery)
點擊一個下拉框，則另一個下拉框的值發(fā)生對應(yīng)變化。如：選擇中國，則另個一下拉框里顯示中國各個省份，具體實現(xiàn)如下，感興趣的朋友可以參考下
2013-09-09
SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的
json作為一種輕量級的數(shù)據(jù)交換格式，在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡單，采用的是鍵值對表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實現(xiàn)的，對spring mvc ajax json相關(guān)知識感興趣的朋友一起學習吧
2015-12-12
jQuery html表格排序插件tablesorter使用方法詳解
這篇文章主要為大家詳細介紹了jQuery html表格排序插件tablesorter的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery實現(xiàn)簡單的滑動導(dǎo)航代碼(移動端)
這篇文章主要介紹了jQuery實現(xiàn)簡單的滑動導(dǎo)航代碼,適合用于移動端。需要的朋友可以參考下
2017-05-05
jquery實現(xiàn)表格隔行換色效果
下面一個示例為大家詳細介紹下使用jquery實現(xiàn)表格的隔行換色功能，感興趣的朋友可以參考下
2015-11-11