jquery 实现动态弹入弹出数字

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>       

阅读更多
个人分类: jquery
想对作者说点什么? 我来说一句

C#检测光盘弹入弹出

2014年09月06日 43KB 下载

JS动态弹入弹出菜单功能

2009年09月08日 774B 下载

右下角的点

2015年03月08日 3.13MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭