一些原生的js小特效

最新推荐文章于 2022-04-23 22:50:21 发布

InLett_杨捷

最新推荐文章于 2022-04-23 22:50:21 发布

阅读量876

点赞数

本文链接：https://blog.csdn.net/InLett_yj/article/details/99286779

版权

这篇博客分享了四个使用原生JavaScript实现的网页特效，包括鼠标跟随画布特效、下雪场景、加载样式以及一个滑块验证效果，其中滑块验证效果存在一些小问题。

摘要由CSDN通过智能技术生成

一.这是一个鼠标跟随特效(使用画布)
html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<canvas id="c" style="width: 100%;height: 100%;"></canvas>
		<script src="tx.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

js部分

window.onload = function(){
	C = Math.cos;
	S = Math.sin;
	U = 0;
	w = window;
	j = document;
	d = j.getElementById('c');
	c = d.getContext('2d');  //通过一个方法来获取可以调用一切 Canvas API 的入口
	W = d.width = w.innerWidth;
	H = d.height = w.innerHeight;
	c.fillRect(0,0,W,H); //左上角 x 坐标, 左上角 y 坐标, 宽度, 高度
	c.globalCompositeOperation = 'lighter';
	c.lineWidth = 0.2;
	c.lineCap = 'round';
	
	var bool = 0;
	    t = 0;
	    d.onmousemove = function(e){
	    	if(window.T){
	    		if(D == 9){
	    			D = Math.random()*15;
	    			f(1);
	    		}
	    		clearTimeout(T);
	    	}
	    	X = e.pageX;
	    	Y = e.pageY;
	    	a = 0;
	    	b = 0;
	    	A = X;
	    	B = Y;
	    	R = (e.pageX / W*999 >> 0 ) / 999;
	    	r = (e.pageY / H*999 >> 0) / 999;
	    	U = e.pageY / H *360 >> 0;
	    	D = 9;
	    	g = 360 * Math.PI / 100;
	    	T = setInterval(f = function(e){
	    		c.save();
	    		c.globalCompositeOperation = 'source-over';
	    		if(e != 1){
	    			c.fillStyle = 'rgba(0,0,0,0.02)';
	    			c.fillRect(0,0,W,H);	
	    		}
	    		c.restore();
	    		i = 25;
	    		while(i--){
	    			c.beginPath();
	    			if(D > 450 || bool){
	    			 if (!bool) { 
                        bool = 1;
                    }
                    if (D < 0.1) { 
                        bool = 0;
                    }
                    t -= g; 
                    D -= 0.1; 
                }
                if (!bool) {
                    t += g;

最低0.47元/天解锁文章

InLett_杨捷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一些原生的js小特效

一.这是一个鼠标跟随特效(使用画布)html部分` `js部分window.onload = function(){ C = Math.cos; S = Math.sin; U = 0; w = window; j = document; d = j.getElementById('c'); c = d.getContext('2d')...
复制链接

扫一扫