js代码是在js文件夹下创建的
onload = function (){
var arr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
var s=[];
var size = 0;
var index = 1;
var node = 0;
var top = 0;
var atr = 0;
var way = 0;
//速度
var sudu = 0;
//路程
var line = 0;
$(function (){
//隐藏显示
$(".style").mouseenter(function (){
$(".color").show();
$(".hide").show();
});
$(".style").mouseleave(function (){
$(".color").hide();
$(".hide").hide();
});
//字体大小
$(".lit").click(function (){
index = $(this).index();
$(this).addClass("bg").siblings().removeClass("bg");
});
//滚动位置
$("span").click(function (){
node = $(this).index();
$(this).addClass("bg").siblings().removeClass("bg");
});
//颜色设置
$("li").each(function (index,item){
var str = "#";
for(var i=0;i<6;i++){
var ns = arr[Math.floor(Math.random()*16)];
str += ns;
}
s.push(str);
$("#i").val(s[0]);
$("li").eq(6).nextAll().addClass("bo")
$(item).css("background",str);
atr = s[0];
$(item).click(function (){
atr = str;
$("#i").val(str);
$(".now").css("background",str);
});
});
$(".now").css("background",s[0]);
//键盘抬起事件
$("#i").keyup(function (){
atr = $(this).val();
$(".now").css("background",$(this).val());
});
//发送点击事件
$("#btn").click(function (){
if($("#m").val() != ""){
way = 5000;
size = index == 0 ? 16 : 20;
top = node == 0 ? Math.random()*(320-80)+80 : node == 1 ? Math.random()*80 : Math.random()*(430-320)+320;
var val = $("#m").val();
$("#m").val("");
val == "" ? null : $(".sp").append("<strong>"+val+"</strong>");
$(".sp").children().last().css({
"position" : "absolute",
"left" : $(".box").width(),
"top" : top,
"fontSize" : size,
"color" : atr
}).stop().animate({
"left" : -$(".sp").children().last().width()
},way,"linear",function (){
$(this).remove();
});
// 悬停效果
$("strong").mouseenter(function (){
$(this).css("cursor","pointer");
$(this).stop().animate();
//速度
way = 5000;
sudu = parseInt($(".box").width()+$(this).width())/way;
//路程
line = parseInt($(this).css("left"))+$(this).width();
});
$("strong").mouseleave(function (){
way = line/sudu;
$(this).stop().animate({
"left" : -$(this).width()
},way,"linear",function (){
$(this).remove();
})
});
}
});
$(window).keyup(function (e){
if(e.keyCode == 13){
$("#btn").click();
}
});
})
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="big">
<div class="box">
<div class="sp"></div>
</div>
<div class="line">
<div class="style">
A
<div class="hide"></div>
<div class="color">
<p class="p1">字号</p>
<div style="overflow: hidden;margin-bottom: 10px;">
<div class="lit rig">小</div>
<div class="lit bg s">标准</div>
</div>
<p class="p1">模式</p>
<div style="margin-bottom: 10px;">
<span class="bg">滚动</span>
<span>顶部</span>
<span>底部</span>
</div>
<p class="p1">颜色</p>
<div class="set">
<input type="" name="" id="i" value="" maxlength="7"/>
<div class="now"></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<input type="" name="" id="m" value="" placeholder="发个弹幕见证当下"/>
<button type="button" id="btn">发送</button>
</div>
</div>
</body>
</html>
实现后的样式，如果需要完整的文件夹，可以联系我，[email protected]