实现步骤：

1.制作样式

我们先来看看body中的代码：

<body><div class="box"><div class="small"><div class="div1"><input type="text"><span>发射</span></div></div></div>
</body>

整个屏幕的大小宽高，可以按照自己喜欢的样子画出来，主要是后面的逻辑处理。

2.逻辑，思路

遇到问题时，一定要静下心来思考，理清逻辑后再来书写代码，不然会越写越乱。
1.弹幕的字体有大有小
2.弹幕的颜色会不一样
3.弹幕会在屏幕中一直移动
4.如何获取输入框中的值
5.获取后输入框中的值如何重置
完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/jquery-1.11.3.js"></script><style>* {margin: 0;padding: 0;outline: none;}.box {width: 800px;height: 600px;margin: 20px auto;background-color: black;position: relative;overflow: hidden;}.small {width: 100%;height: 50px;background-color: #343334;position: absolute;bottom: 0px;}.small .div1 {height: 30px;width: 200px;position: absolute;right: 0;top: 50%;margin-top: -15px;}.small .div1 input {display: block;width: 150px;height: 100%;box-sizing: border-box;float: left;}.small .div1 span {display: block;width: 50px;height: 29px;background-color: #EFEEF0;float: left;}.danmu {position: absolute;}</style>
</head>
<body><div class="box"><div class="small"><div class="div1"><input type="text"><span>发射</span></div></div></div>
</body>
<script>$("span").click(function (e) {//获取输入框中的值var a = $("input").val()//创建一个span元素var span1 = $("<span class=\"danmu\"></span>").text(a)//字体开始的位置，大小，颜色span1.css({ left: 800, top: Math.floor(Math.random() * (600 - 100)), fontSize: fontSize(), color: color() })//将字体添加到class=box的元素中span1.appendTo(".box")//循环定时器，用来执行弹幕的移动setInterval(function () {span1.css({ left: parseInt(span1.css("left")) - Math.ceil(Math.random() * 5) })}, 30)//重置输入框的值$("input").val("")})//字体大小function fontSize() {return Math.floor(Math.random() * 20) + 20;}//字体颜色function color() {var r = Math.floor(Math.random() * 256)var g = Math.floor(Math.random() * 256)var b = Math.floor(Math.random() * 256)return "rgb(" + r + "," + g + "," + b + ")"}
</script></html>

实现效果：

利用jQuery制作简易弹幕效果相关推荐

利用jQuery制作简易手风琴
利用jQuery制作简易手风琴实现步骤 1.引入jQuery文件 2.将写好的标签进行样式修改 3.逻辑代码的书写我们先来看看效果: 实现步骤 1.引入jQuery文件 <script sr ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
利用Unity3D制作简易2D计算器
利用Unity3D制作简易2D计算器标签(空格分隔): uiniy3D 1. 操作流程在unity3DD中创建一个新项目注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本在新建 ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
ae破碎效果在哪_利用Ae制作出破碎效果的详细步骤
伙伴们知道在其中如何制作出破碎效果呢?不太了解的可以去下文看看利用Ae制作出破碎效果的详细步骤. 首先,打开我们的软件,AE,小编用的是CS6版本的,不过即使版本不同,其中的操作也都是大同小异哦. 打 ...
android动画实例源码,Android编程实现简易弹幕效果示例【附demo源码下载】
本文实例讲述了Android编程实现简易弹幕效果.分享给大家供大家参考,具体如下: 首先上效果图,类似于360检测到骚扰电话页面: 布局很简单,上面是一个RelativeLayout,下面一个Butt ...
利用jQuery实现回收站删除效果
jQuery是一款非常强大的Javascript脚本库,我们开发者喜欢jQuery的原因除了它代码简洁外,更多的是因为jQuery插件非常丰富.今天我们用一个示例来解说jQuery是如何实现拖拽的. ...
jQuery制作动态酷效果总结
jQuery是一个优秀的JavaScript框架,可以很好的解决不同浏览器兼容的问题,尤其是在ASP.NET MVC下,它的作用更加的凸显. jQuery在制作动态酷效果的时候有很强的优势,以下是笔者 ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...

利用jQuery制作简易弹幕效果

利用jQuery制作简易弹幕效果

实现步骤：

1.制作样式

2.逻辑，思路

利用jQuery制作简易弹幕效果相关推荐

最新文章

热门文章