jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

2024-03-29 12:16:07

本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示。

完整实例代码点击此处本站下载。

具体代码如下：

<!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实现点赞数字累加动画效果</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程序设计有所帮助。

jQuery实现的超简单点赞效果实例分析

本文实例讲述了jQuery实现的超简单点赞效果,分享给大家供大家参考,具体如下: 1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em>1</em><i></i><s></s><u>超赞</u></b> <b class="tj">
jQuery简单实现QQ空间点赞已经取消点赞

看到有网友制作了对空间好友的动态点赞,加了个以及取消赞的功能.直接运行的脚本好友动态点赞代码 jQuery("a.qz_like_btn_v3[data-clicklog='like']").each(function(index,item){ console.log(item); jQuery(item).trigger('click'); }); jQuery(window).scroll(function(){ jQuery("a.qz_like_btn_v3[dat
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&
jQuery实现简单的点赞效果

本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model: namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGener
jquery心形点赞关注效果的简单实现

html代码 <div class="stage"> <div class="heart"></div> </div> css代码 .heart { width: 100px; height: 100px; background: url("") no-repeat; background-position: 0 0; cursor: pointer; -webkit-transition: bac
jQuery+ajax实现文章点赞功能的方法

本文实例讲述了jQuery+ajax实现文章点赞功能的方法.分享给大家供大家参考,具体如下: 前几日有童鞋问我索要本站右上角的点赞功能,麦葱左思右想,决定把这功能分享出来,希望此功能对各位会带来方便哦. 代码很简单,jQuery+php实现的. jQuery代码: jQuery(document).ready(function($) { $(".zan").click(function(e){ var $i=$(".zan i"), $b=$("<b
jQuery+ajax实现实用的点赞插件代码

之前给大家总结了jQuery插件开发的两种方式,这里就实践一下,做一款点赞特效插件,先看看效果吧: 废话少说,上代码: //***扩展对象点赞插件.点赞特效***// //***Zynblog**// //***2016-5-11**// //***用法:jQuery('.praisebtn').praise(options);***// ; (function ($) { $.fn.praise = function (options) { var defaults = { obj: null
php+jQuery+Ajax实现点赞效果的方法(附源码下载)

本文实例讲述了php+jQuery+Ajax实现点赞效果的方法.分享给大家供大家参考,具体如下: 数据库设计先准备两张表,pic表保存的是图片信息,包括图片对应的名称.路径以及图片"赞"总数,pic_ip则记录用户点击赞后的IP数据. CREATE TABLE IF NOT EXISTS `pic` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pic_name` varchar(60) NOT NULL, `pic_url` varchar(60
jQuery+CSS3实现点赞功能

效果图: 图(1) 初始图图(2) 点击后代码如下: <!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> <m
jquery点赞功能实现代码点个赞吧!

要实现的点赞功能比较简单,就是实现点击按钮,有心向上飘,一直飘出屏幕外. 首先只需要在body中定义一个button.和盛放心的盒子 <div id = "demo"></div> <input type = "button" id = "btn1" value = "点个赞吧" /> 由于还要引进心的图片,所以在这里我们在设置css样式的时候还要设置图片img的样式. css代码如下: &

jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

相关推荐

随机推荐