jQuery实现弹幕效果（鼠标单击和键盘回车键）

提示：jQuery代码在下一篇

css内部样式代码:

 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;}

html布局：

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

js代码：

//引入jQuery
<script src="../js/jquery.js"></script><script>// 绑定点击事件$("button").click(show);function show() {// 创建spanvar $span = $("<span></span>");// 赋值操作$span.html($('#text').val());// 获取随机的top值var top = Math.random() * 400;// 获取随机的颜色var color = "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";// 设置css初始值$span.css({//left根据屏幕尺寸设置，比选择区尺寸大即可left: "1600px",top: top,color: color,});// 添加到boxDom$("#boxDom").append($span);// 设置动画$span.animate({ left: "-350px" }, 3000,function(){// 动画完成移除这个span$(this).remove();});}// 绑定键盘事件$(document).keyup(function (ev) {if (ev.keyCode == 13) { //回车show();}});</script>

jQuery实现弹幕效果（鼠标单击和键盘回车键）相关推荐

jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果
原文:jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm 1 ...
Jquery实现弹幕效果
用jquery写了一个弹幕的小功能,供大家参考学习. 前端显示 <span style="font-size:18px;"><div class="bo ...
基于jQuery实现弹幕效果
效果如下: HTML: <div class="dmbg"> <div class="dmHt"> <img src=" ...
【JS】jQuery实现弹幕效果
效果图 HTML <div class="boxDom" id="boxDom"><div class="idDom" i ...
【JavaScript】jQuery 实现耦合的鼠标单击与双击事件
jq 实现单击双击事件 jq 的 dblclick 和 click 互相独立,在触发 dblclick 的基础上也会触发两次 click 这里演示一种使其互相耦合的 demo var click = ...
jQuery 实现弹幕效果案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
c语言检测四个方向键盘输入,如何既检测鼠标单击又检测键盘输入
该楼层疑似违规已被系统折叠隐藏此楼查看此楼判断鼠标单击程序 COORD pt; int ismouse() { DWORD dwMode, dwOldMode; /* 原来的模式与新模式 */ D ...
【jQuery学习】—实现弹幕效果
[jQuery学习]-实现弹幕效果

jQuery实现弹幕效果（鼠标单击和键盘回车键）

jQuery实现弹幕效果（鼠标单击和键盘回车键）相关推荐

最新文章

热门文章