Jquery实现点击页面发送弹幕效果

最新推荐文章于 2022-09-22 16:45:50 发布

霸道流氓气质

最新推荐文章于 2022-09-22 16:45:50 发布

阅读量534

点赞数

分类专栏：前端那些骚操作文章标签： jquery

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83061887

版权

前端那些骚操作专栏收录该内容

471 篇文章 16 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Jquery实现点击弹幕特效 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <!-- 此代码作用是使body布满浏览器 -->
<style type="text/css">
html,body{
	height:100%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">  
    var a_idx = 0;  
    jQuery(document).ready(function($) {  
        $("body").click(function(e) {  
            var a = new Array("脑中一片空白", "念昏了头", "刚睡醒～", " 脸红了啦", "见钱眼开", "眼睛一亮", "☺☺" ,"羞羞脸", " 怎麼会这样…", "( ⊙ o ⊙ ) 目瞪口呆", "什麼什麼，告诉我吧", "笑(打招呼)");  
            var $i = $("<span/>").text(a[a_idx]);  
            a_idx = (a_idx + 1) % a.length;  
            var x = e.pageX,  
            y = e.pageY;  
            $i.css({  
                "z-index": 9999999999999999999999999999999999999999,  
                "top": y - 20,  
                "left": x,  
                "position": "absolute",  
                "font-weight": "bold",  
                "color": "#ff6651"  
            });  
            $("body").append($i);  
            $i.animate({  
                "top": y - 180,  
                "opacity": 0  
            },  
            1500,  
            function() {  
                $i.remove();  
            });  
        });  
    });  
    </script>
 <body>
  
 </body>
</html>

霸道流氓气质

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery实现点击页面发送弹幕效果

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt; Jquery实现点击弹幕特效 &lt;/title&gt; &lt;m
复制链接

扫一扫