jQuery 如何实现弹幕效果? 下面本篇文章给大家通过代码示例来介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
JQ 实现弹幕效果, 快来吐糟你的想法吧
代码如下, 复制即可使用:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- JQ 实现弹幕效果
- </title>
- <style type="text/CSS">
- *{ padding: 0; margin: 0; } #box{ height:700px; width:1000px; margin:
- 0 auto; border:1px solid #000000; position: relative; } #main{ width:100%;
- height:605px; position: relative; overflow: hidden; } p{ position: absolute;
- left:1000px; width:200px; top:0; } #bottom{ width:100%; height:80px; background:
- #ABCDEF; text-align: center; padding-top: 15px; position: absolute; left:
- 0; bottom: 0; } #txt{ width:300px; height:50px; } #btn{ width:100px; height:50px;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="main">
- </div>
- <div id="bottom">
- <input type="text" id="txt" placeholder="请输入内容" />
- <input type="button" id="btn" value="发射" />
- </div>
- </div>
- <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js">
- </script>
- <script type="text/javascript">
- $(function() {
- var pageH = parseInt($("#main").height());
- var colorArr = ["#cfaf12", "#12af01", "#981234", "#adefsa", "#db6be4", "#f5264c", "#d34a74"];
- $("#btn").bind("click", auto);
- document.onkeydown = function(e) {
- if (e.keyCode == 13) {
- auto();
- }
- };
- function auto() {
- var $value = $("#txt").val();
- $("#main").append("<p>" + $value + "</p>");
- $("#txt").val("");
- var _top = parseInt(pageH * (Math.random()));
- var num = parseInt(colorArr.length * (Math.random()));
- $("p:last-child").CSS({
- "top": _top,
- "color": colorArr[num],
- "font-size": "20px"
- });
- $("p:last-child").animate({
- "left": "-200px"
- },
- 10000);
- $("p:last-child").stop().animate({
- "left": "-300px"
- },
- 10000, "linear",
- function() {
- $(this).remove();
- });
- //console.log($value);
- };
- })
- </script>
- </body>
- </HTML>
效果图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17465.html