jQuery實現的頁面彈幕效果【測試可用】

2019-11-19 13:14:24

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的頁面彈幕效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html lang="en"><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>juqery彈幕</title><style>*{margin: 0px;padding: 0px;}html,body{width: 100%;height: 100%;font-family: "微軟雅黑";background-color: #ccc;margin: 0;padding: 0;}.boxDom{width: 100%;height: 800px;position: relative;overflow: hidden;}.boxDom img{width: 100%;height: 100%;}.idDom{width: 100%;height: 50px;background-color: #666;position: fixed;bottom: 0px;}.content{width: 600px;height: 50px;position: absolute;left: 500px;top:10px;}.title{font-size: 25px;display: inline;vertical-align: bottom;color: #fff;}.text{width: 300px;height: 30px;border:none;border-radius: 5px;text-indent: 2em;margin-left: 60px;}.btn{width: 100px;height: 30px;margin-left: 20px;font-size: 20px;font-weight: 700;color: #fff;background-color: red;border:none;border-radius: 5px;cursor: pointer;}.string {width: 300px;height: 40px;margin-top: 20px;position: absolute;color: #000;font-size: 20px;font-family: "微軟雅黑";}</style></head><body><div class="boxDom" id="boxDom"><!-- <img src="7.jpg" alt=""> --><div class="idDom"><div class="content"><p class="title">發送彈幕:</p><input type="text" class="text"><button class="btn" id="btn" type="button">發送</button></div></div></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(function () {var boxDom = $("#boxDom");var top, right;var pageWidth = parseInt($(document).width());var pageHeight = parseInt($(document).height());$("#btn").bind("click", auto);//綁定回車鍵按鈕document.onkeydown = function(event){if(event.keyCode == 13){auto();}}function auto() {//獲取輸入的字符串var str = $(".text").val();//生成一個元素var createSpan = $("<span class ='string'></span>");//給元素賦值createSpan.text(str);//為了頁面友好，清空剛輸入的內容$(".text").val("");//生成元素一個隨機的位置 為了使每一條彈幕都出現不同的位置top = Math.floor(Math.random()*pageHeight);createSpan.css({ "top": top, "right": -400, "color": getRandomColor() });boxDom.append(createSpan);//元素在dom運動起來//首先有一個span，只讓最后一個動起來var spandom = $("#boxDom>span:last-child");//找到最后一個spanspandom.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;}})$(function () {var boxDom = $("#boxDom");var top, right;var pageWidth = parseInt($(document).width());var pageHeight = parseInt($(document).height());$("#btn").bind("click", auto);//綁定回車鍵按鈕document.onkeydown = function(event){if(event.keyCode == 13){auto();}}function auto() {//獲取輸入的字符串var str = $(".text").val();//生成一個元素var createSpan = $("<span class ='string'></span>");//給元素賦值createSpan.text(str);//為了頁面友好，清空剛輸入的內容$(".text").val("");//生成元素一個隨機的位置 為了使每一條彈幕都出現不同的位置top = Math.floor(Math.random()*pageHeight);createSpan.css({ "top": top, "right": -400, "color": getRandomColor() });boxDom.append(createSpan);//元素在dom運動起來//首先有一個span，只讓最后一個動起來var spandom = $("#boxDom>span:last-child");//找到最后一個spanspandom.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></body></html>

運行效果如下圖所示：