php+js实现弹幕,jQuery弹幕效果的简单实现方法

本文主要为大家详细介绍了简单实现jQuery弹幕效果的相关资料，希望能帮助到大家。

在要写一个弹幕案例的时候，首先要清楚每一步要干什么。

首先搭好框架之后在要发送弹幕时应该准备进行如下步骤：获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();

生成一个元素：利用jQuery的 var createSpan =$(““)生成一个span元素，以便发送。

给刚创建的span赋值，即获取到的文本框中的值 createSpan.text(str );

设置元素的动画效果,是元素动起来。利用jQuery的animate(css样式值，时间， 执行完动画调用的方法)。执行完动画得手动移除刚刚所添加的元素。

里面还有许多细节，仔细看就会有收获！

弹幕案例

$(function(){

var boxDom = $("#boxDom");

//var domContent = $("#domContent");

var top, right;

var pageWidth = parseInt($(document).width());

var pageHeight =parseInt($(document).height());

//点击按钮

$("#btn").bind("click",auto);//按钮绑定方法

//按下回车

document.onkeydown = function(){

if(event.keyCode == 13){

auto();

}

}

function auto(){

//1.获取输入的字符串

var str = $(".text").val();

//2.生成一个元素

var createSpan = $("");

//3.给生成的元素赋值

createSpan.text(str);

//为了页面友好，清空刚刚输入的值

$(".text").val("");

//生成元素一个随机的位置，为了使每条弹幕都出现在屏幕上不同的位置

top = Math.floor(Math.random()*pageHeight);

createSpan.css({"top":top, "right": -400, "color": getRandomColor()});

boxDom.append(createSpan);

//4.设置元素的动画效果，animate(css样式值，时间， 执行完动画调用的方法)

//页面上有N个span，只让最后一个动起来

var spandom = $("#boxDom>span:last-child");//找到最后一个span

spandom.animate({"right":pageWidth+300},10000,function(){

//移除元素

$(this).remove();

});

}

//定义一个可以生成随机颜色的方法,可以使每条弹幕的颜色不同

function getRandomColor(){

var colorArr = ['1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];

var color = "";

for(var i = 0; i < 6; i++){

color += colorArr[Math.floor(Math.random()*16)];

}

return "#"+color;

}

});

html,body{

margin: 0px;

padding: 0px;

width: 100%;

height: 100%;

font-family: "微软雅黑";

background: #ccc;

}

.boxDom{

width: 100%;

height: 100%;

position: relative;

overflow: hidden;

}

.idDom{

width: 100%;

height: 60px;

background:#666;

position: fixed;

bottom: 0px;

}

.contet{

width: 500px;

height: 40px;

position: absolute;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

margin: auto;

}

.title{

display: inline;

font-size: 24px;

vertical-align: bottom;

color: #ffffff;

padding-left: 300px;

}

.text{

width: 300px;

height: 30px;

border:none;

border-radius:5px;

font-size: 20px;

margin-left:60px;

}

.btn{

width: 60px;

height: 30px;

color: #ffffff;

background-color: red;

border:none;

font-size:16px;

margin-left:60px;

margin-top: 20px;

}

.string {

width: 300px;

height: 40px;

margin-top: 20px;

position: absolute;

color: #000;

font-size: 20px;

font-family: "微软雅黑";

}

说点什么:

发送

效果图如下：

相关推荐：