2020-3-1 前端達(dá)人
前言:
做網(wǎng)頁(yè)項(xiàng)目時(shí)想要背景是動(dòng)態(tài)的,推薦兩個(gè)我覺(jué)得比較可以的js動(dòng)態(tài)背景。
隨鼠標(biāo)的移動(dòng)而移動(dòng)的線條,具體效果看圖:
你焦點(diǎn)在哪,那么那里的線條就會(huì)匯聚到你的焦點(diǎn)處。
用法:將js聲明到body內(nèi)即可,我是放置在body底部的
<script type="text/javascript" src=";
1
可以鼠標(biāo)點(diǎn)擊產(chǎn)生字的,如圖:
用法和第一個(gè)類似,不過(guò)在這個(gè)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ú)立", "@廚藝", "@橘子", "@交友", "@愛(ài)媳婦", "@愛(ài)家人"); 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èn)網(wǎng)絡(luò)上的jq即可,還有就是點(diǎn)擊產(chǎn)生的字可以自行修改。
————————————————藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com