前言：
做網(wǎng)頁項(xiàng)目時想要背景是動態(tài)的，推薦兩個我覺得比較可以的js動態(tài)背景。
隨鼠標(biāo)的移動而移動的線條，具體效果看圖：
你焦點(diǎn)在哪，那么那里的線條就會匯聚到你的焦點(diǎn)處。
用法：將js聲明到body內(nèi)即可，我是放置在body底部的
<script type="text/javascript" src=";
1
可以鼠標(biāo)點(diǎn)擊產(chǎn)生字的，如圖：
用法和第一個類似，不過在這個js文件前得先引入jquery:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
/* 鼠標(biāo) */
var a_idx = 0;
jQuery(document)
.ready(
function($) {
$("body")
.click(
function(e) {
var a = new Array("@健身",
"@學(xué)習(xí)", "@機(jī)車",
"@攝影", "@自由",
"@考研", "@自律",
"@獨(dú)立", "@廚藝",
"@橘子", "@交友",
"@愛媳婦", "@愛家人");
var $i = $("<span></span>")
.text(a[a_idx]);
a_idx = (a_idx + 1)
% a.length;
var x = e.pageX, y = e.pageY;
$i
.css({
"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "rgb("
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ")"
});
$("body").append($i);
$i.animate({
"top" : y - 180,
"opacity" : 0
}, 1500, function() {
$i.remove();
});
});
});
</script>
這里使用的是cdn形式的jquery即不用將jq放入本地文件再引入，直接訪問網(wǎng)絡(luò)上的jq即可，還有就是點(diǎn)擊產(chǎn)生的字可以自行修改。
————————————————
版權(quán)聲明：本文為CSDN博主「helllolsy」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/CodingNO1/article/details/104572143
