Jquery实现点击页面发送弹幕效果
生活随笔
收集整理的這篇文章主要介紹了
Jquery实现点击页面发送弹幕效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
?
總結
以上是生活随笔為你收集整理的Jquery实现点击页面发送弹幕效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cordova打包教程知识体系整理（Vu
- 下一篇： webpack使用插件将css抽取出来