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

喜欢ヅ旅行 2023-10-18 09:43 153阅读 0赞

![70][]

<!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>
     
    <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>

[70]: https://img-blog.csdn.net/20181015172447699?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70