本文主要为大家详细介绍了简单实现jQuery弹幕效果的相关资料，希望能帮助到大家。
在要写一个弹幕案例的时候，首先要清楚每一步要干什么。
首先搭好框架之后在要发送弹幕时应该准备进行如下步骤：
获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();
生成一个元素：利用jQuery的 var createSpan =$(““)生成一个span元素，以便发送。
给刚创建的span赋值，即获取到的文本框中的值 createSpan.text(str );
设置元素的动画效果,是元素动起来。利用jQuery的animate(css样式值，时间， 执行完动画调用的方法)。执行完动画得手动移除刚刚所添加的元素。
里面还有许多细节，仔细看就会有收获！
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>弹幕案例</title>
<script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(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 = $("<span class = 'string' ></span>");
//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;
}
});
</script>
<style type="text/css">
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: "微软雅黑";
}
</style>
</head>
<body>
<p class = "boxDom" id = "boxDom">
<img src="../images/bg_2.jpg" style="width:100%; height:100%" />
<p id = "idDom" class = "idDom">
<p class = "content">
<p class = "title"> 说点什么:</p>
<input type = "text" class = "text"/>
<button type = "button" class = "btn" id = "btn" >发送</button>
</p>
</p>
</p>
</body>
</html>效果图如下：
相关推荐：
Atas ialah kandungan terperinci jQuery弹幕效果的简单实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AMAplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AMSaya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AMArtikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AMJavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AMTrend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AMJavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AMPython lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.
Bagaimana saya memasang javascript?Apr 05, 2025 am 12:16 AMJavaScript tidak memerlukan pemasangan kerana ia sudah dibina dalam pelayar moden. Anda hanya memerlukan editor teks dan penyemak imbas untuk memulakan. 1) Dalam persekitaran penyemak imbas, jalankan dengan memasukkan fail HTML melalui tag. 2) Dalam persekitaran Node.js, selepas memuat turun dan memasang node.js, jalankan fail JavaScript melalui baris arahan.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
