跟隨滑鼠的蛛網背景特效

2021-10-07 06:39:00 字數 1904 閱讀 2079

複製**儲存的乙個js檔案裡,然後再html頁面中引入就行

function async_load()

if(window.addeventlistener)

else

if(window.attachevent)

else

!function()

//封裝方法,壓縮之後減少檔案大小

function get_by_tagname

(name)

//獲取配置引數

function get_config_option()

;}//設定canvas的高寬

function set_canvas_size()

//繪製過程

function draw_canvas()

}}),

frame_func

(draw_canvas);}

//建立畫布,並新增到body中

var the_canvas = document.

createelement

("canvas"),

//畫布

config =

get_config_option()

,//配置

canvas_id =

"c_n"

+ config.l,

//canvas id

context = the_canvas.

getcontext

("2d"),

canvas_width, canvas_height,

frame_func = window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe ||

window.orequestanimationframe || window.msrequestanimationframe ||

function

(func)

, random = math.random,

current_point =

, all_array;

the_canvas.id = canvas_id;

the_canvas.style.csstext =

"position:fixed;top:0;left:0;z-index:"

+ config.z +

";opacity:"

+ config.o;

get_by_tagname

("body")[

0].(the_canvas)

;//初始化畫布大小

set_canvas_size()

, window.onresize = set_canvas_size;

//當時滑鼠位置儲存,離開的時候,釋放當前位置資訊

window.onmousemove =

function

(e), window.onmouseout =

function()

;//隨機生成config.n條線位置資訊

for(var random_lines =

, i =

0; config.n > i; i++))

;}all_array = random_lines.

concat

([current_point]);

秒後繪製

settimeout

(function()

,100);

}();

效果圖

跟隨滑鼠的按鈕說明文字

先看效果,緊緊跟隨滑鼠的按鈕說明文字 我以乙個按扭為例來詳細講解製作過程。第二步 建立影片剪輯新元件,名為資訊,同樣,你可以隨你的意願任取 在第一層第5幀處插入空白關鍵幀,在第1幀和第5幀開啟動作面板,分別輸入 stop 在第5幀中繪製乙個有邊框的矩形,具體設定見圖一 img files beyon...

JS實現跟隨滑鼠的提示框

諸葛亮 a 霍去病 a 唐太宗 a 武則天 a msg div body text css a msg style js window.onload function oas i onmouseout function oas i onmousemove function ev 上述 為什麼要在座標...

WPF實現滑鼠劃過點亮粒子背景特效

實現效果如下 1 粒子類particle.cs中新增初始半徑屬性 初始半徑 public double defaultradius 2 粒子系統類particlesystem.cs 新增方法 設定粒子透明度動畫 private void setparticleopacityanimation ell...