jQuery实现弹幕特效
更新时间:2019年11月29日 08:27:34 作者:有一个进大厂的梦
这篇文章主要为大家详细介绍了jQuery实现弹幕特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
案例简介
jQuery实现弹幕效果,代码如下。
案例目录
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery弹幕案例</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" /> </head> <body> <div class="box"> <div class="top"></div> <div class="bot"> <input type="text" id="txt" placeholder="我来说两句。。。" /> <button type="button" id="btn">发送</button> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function() { var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"]; $("#btn").on("click", function() { var randomColor = parseInt(Math.random() * colors.length); var randomY = parseInt(Math.random() * 400); $("<span></span>") //创建span .text($("#txt").val()) //设置内容 .css("color", colors[randomColor]) //设置字体颜色 .css("left", "1400px") //设置left值 .css("top", randomY) //设置top值 .animate({ left: -500 }, 10000, "linear", function() { //到了终点,需要删除 $(this).remove(); }) //添加动画 .appendTo(".top"); $("#txt").val(""); }); }); </script> </body> </html>
CSS部分
* { margin: 0; padding: 0; } .box { width: 1600px; height: 757px; } .top { width: 100%; height: 660px; position: relative; } .bot { width: 100%; height: 97px; background-color: #666666; position: relative; } #txt { width: 300px; height: 30px; border-radius: 5px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -15px; border: none; } #btn { width: 60px; height: 30px; color: white; background-color: red; position: absolute; left: 955px; top: 34px; border: none; } span { position: absolute; color: #000; font-size: 50px; line-height: 1.5em; cursor: pointer; white-space: nowrap; }
效果展示
以上就是jQuery实现弹幕效果的代码,希望对您有帮助!
源码下载:jQuery弹幕
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
简单谈谈jQuery(function(){})与(function(){})(jQuery)
这篇文章主要简单介绍了jQuery(function(){})与(function(){})(jQuery)的区别,需要的朋友可以参考下2014-12-12JQuery判断radio(单选框)是否选中和获取选中值方法总结
这篇文章主要介绍了JQuery判断radio(单选框)是否选中和获取选中值方法总结,本文讲解了利用获取选中值判断选中、使用checked属性判断选中、jquery获取radio单选按钮的值、获取一组radio被选中项的值、设置单选按钮被选中等内容,需要的朋友可以参考下2015-04-04Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
今天小编就为大家分享一篇关于Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解以及数组中查询某值是否存在,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧2019-01-01jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
下面小编就为大家分享一篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现2010-04-04
最新评论