信鸽网

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

  作者：bea

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

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: