jquery 实现动态弹入弹出数字

最新推荐文章于 2022-03-08 11:34:49 发布

千游

最新推荐文章于 2022-03-08 11:34:49 发布

阅读量1.2k

点赞数

分类专栏： jquery 文章标签： jquery function div xhtml class html

本文链接：https://blog.youkuaiyun.com/zzqkillyou/article/details/5649118

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

jquery 中封装的一些方法确实很好用，但是有的比较不容易理解，我在别人做的一个页面js对战游戏中看到一个用jquery方法实现的文字动态弹入弹出，觉得不错，便ctrl+c了下来，用到了项目中，人物掉血时便使用了这一效果，用下面的页面演示：
<!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>
<style>
//定义显示数字div的样式，可以自定义
.DamageCue{
    position:absolute;
    left:0px;
    top:0px;
    z-index:40;
    font-size:25px;
    width:100px;
    text-align:center;
    color:red;
    font-family:Georgia;
    font-weight:bold;
    }
</style>

</head>
//导入jquery包，我用的是 1.2.6 版本
<script src="jquery.js"></script>
<script>

function test(){
//动态创建一个div，显示弹入的数字，因为要显示的位置是不定的，所以div不固定，我的做法是显示完毕后删除该div，这里只做演示
       var div= document.createElement("div");
       div.className = "DamageCue";

       document.body.appendChild(div);
       ShowDamage("-32766");
}

//动态的弹入弹出数字
//这是直接copy的代码，我几乎看不懂，只知道修改其中的数字可以改变文字弹入，停留，弹出的时间间隔，其中.DamageCue是预定义div的class，可以自行修改
function ShowDamage(dmage){
setTimeout(function(){
    $(".DamageCue").html(dmage);
       $(".DamageCue").animate({
        left: "-=" + 0, top: "-=" + 0, fontSize: "20px"
      } ,
      {
        duration: 520
      }
      );
      $(".DamageCue").queue(function()
      {
        setTimeout(function()
        {
          $(".DamageCue").animate(
          {
            top: "-=" + 5, opacity: 0
          }
          ,
          {
            duration: 1000
          }
          ); setTimeout(function()
          {
            $(".DamageCue").remove()
          }
          , 1600)
        }
        , 1600); $(this).dequeue()
      }
      )
}
, 100);
}
</script>
<body onload = "test();">
</body>
</html>