本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下
效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >吐槽弹幕</ title > < script type = "text/javascript" src = "jquery-3.2.1.min.js" ></ script > < style > html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: "微软雅黑"; font-size: 62.5%; } .boxDom { width: 100%; height: 100%; position: relative; overflow: hidden; } .idDom { width: 100%; height: 100px; background: #666; position: fixed; bottom: 0px; } .content { display: inline-block; width: 430px; height: 40px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; } .title { display: inline; font-size: 4em; vertical-align: bottom; color: #fff; } .text { border: none; width: 300px; height: 30px; border-radius: 5px; font-size: 2.4em; } .btn { width: 60px; height: 30px; background: #f90000; border: none; color: #fff; font-size: 2.4em; } span { width: 300px; height: 40px; position: absolute; overflow: hidden; color: #000; font-size: 4em; line-height: 1.5em; cursor: pointer; white-space: nowrap; } </ style > </ head > < body > < div class = "boxDom" id = "boxDom" > < div class = "idDom" id = "idDom" > < div class = "content" > < p class = "title" >吐槽:</ p > < input type = "text" class = "text" id = "text" /> < button type = "button" class = "btn" id = "btn" >发射</ button > </ div > </ div > </ div > < script > $(function () { //注册事件 各个颜色的弹幕字体 var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"]; $("#btn").click(function () { var randomColor = parseInt(Math.random() * colors.length); var randomY = parseInt(Math.random() * 400); $("< span ></ span >")//创建span .text($("#text").val())//设置内容 .css("color", colors[randomColor])//设置字体颜色 .css("left", "1400px")//设置left值 .css("top", randomY)//设置top值 .animate({left: -500}, 10000, "linear", function () { //到了终点,需要删除 $(this).remove(); })//添加动画 .appendTo("#boxDom"); $("#text").val(""); }); $("#text").keyup(function (e) { if (e.keyCode == 13) { $("#btn").click(); } }); }); </ script > </ body > </ html > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/220305/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)