sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载

soゝso 2017-03-21 17:28:09 20675

sojson的页面特效怎么弄出来的?

鉴于老有人加群来询问网站特效怎么做的,首先不是我做的,我也是在Github上看到的,拿过来用而已。本站长 soゝso ,有一颗前端的❤,无奈走了 Java  的路。如果上天在给我一次机会,我还是选择走 Java  的不归路。

关于特效源码说明:

  1. 首先我从开始到结束,都没说是我写的,我一直在说在github上看到的。
  2. 一直有一个人老说我没标明出处,我有2点原因,第一我看到的源码肯定不是你说你提交的,第二,开源的东西标注不标注出处也是自由吧。
  3. 我也开源了一部分东西,包括一些完整的项目。开源意味着允许对方使用,开源意味着转载就挺多了,再说我又没拿这个盈利,东西在这里呢。

说明这些不是我“ 心胸狭隘 ”,也不是我不“ 厚道 ”。只是按我的理解做事。

下面说说特效的事,引入一个JS即可(记住放入<body>...</body> 之间):

<script src="http://open.sojson.com/common/js/canvas-nest.min.js" count="200" zindex="-2" opacity="0.5" color="47,135,193" type="text/javascript">
</script>

可以直接用,open.sojson.com ,是本站的公开cdn 域名。你放心用就可以了,流量钱算我的。

严重注意的问题:这个script 引入得放到<body> 里,放到header 里,会报错。并且不依赖其他js 插件。怕有人还是比较马虎,下面截图。

还有没有压缩的js版本:

地址为:http://open.sojson.com/common/js/canvas-nest.js

下面为js代码:

! function() {
	//封装方法,压缩之后减少文件大小
	function get_attribute(node, attr, default_value) {
		return node.getAttribute(attr) || default_value;
	}
	//封装方法,压缩之后减少文件大小
	function get_by_tagname(name) {
		return document.getElementsByTagName(name);
	}
	//获取配置参数
	function get_config_option() {
		var scripts = get_by_tagname("script"),
			script_len = scripts.length,
			script = scripts[script_len - 1]; //当前加载的script
		return {
			l: script_len, //长度,用于生成id用
			z: get_attribute(script, "zIndex", -1), //z-index
			o: get_attribute(script, "opacity", 0.5), //opacity
			c: get_attribute(script, "color", "0,0,0"), //color
			n: get_attribute(script, "count", 99) //count
		};
	}
	//设置canvas的高宽
	function set_canvas_size() {
		canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
		canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	}

	//绘制过程
	function draw_canvas() {
		context.clearRect(0, 0, canvas_width, canvas_height);
		//随机的线条和当前位置联合数组
		var all_array = [current_point].concat(random_lines);
		var e, i, d, x_dist, y_dist, dist; //临时节点
		//遍历处理每一个点
		random_lines.forEach(function(r) {
			r.x += r.xa, 
			r.y += r.ya, //移动
			r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, 
			r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界,反向反弹
			context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
			for (i = 0; i < all_array.length; i++) {
				e = all_array[i];
				//不是当前点
				if (r !== e && null !== e.x && null !== e.y) {
						x_dist = r.x - e.x, //x轴距离 l
						y_dist = r.y - e.y, //y轴距离 n
						dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
					dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
						d = (e.max - dist) / e.max, 
						context.beginPath(), 
						context.lineWidth = d / 2, 
						context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", 
						context.moveTo(r.x, r.y), 
						context.lineTo(e.x, e.y), 
						context.stroke());
				}
			}
			all_array.splice(all_array.indexOf(r), 1);

		}), 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) {
			window.setTimeout(func, 1000 / 45);
		}, random = Math.random, 
		current_point = {
			x: null, //当前鼠标x
			y: null, //当前鼠标y
			max: 20000
		};
	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].appendChild(the_canvas);
	//初始化画布大小

	set_canvas_size(), window.onresize = set_canvas_size;
	//当时鼠标位置存储,离开的时候,释放当前位置信息
	window.onmousemove = function(e) {
		e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
	}, window.onmouseout = function() {
		current_point.x = null, current_point.y = null;
	};
	//随机生成config.n条线位置信息
	for (var random_lines = [], i = 0; config.n > i; i++) {
		var x = random() * canvas_width, //随机位置
			y = random() * canvas_height,
			xa = 2 * random() - 1, //随机运动方向
			ya = 2 * random() - 1;
		random_lines.push({
			x: x,
			y: y,
			xa: xa,
			ya: ya,
			max: 6000 //沾附距离
		});
	}
	//0.1秒后绘制
	setTimeout(function() {
		draw_canvas();
	}, 100);
}();

解释下script上的参数:

count  :线条数量。

zindex :层级。

opacity:透明度。

color   :线条颜色。最好用RGB颜色。

有问题加群交流,下面有JS源文件下载。


版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/127.html

转载时必须以链接形式注明原始出处及本声明。


附件下载:

备注:点击文件名下载,附件源来自云端,只能在本站下载。复制下载链接无效。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
SOJSON动态云端加HTML5页面源码(下载),SOJSON特效
SOJSON的圣诞雪花特效特效分享,雪花特效下载
网站页面添加 Google AdSense 后页面慢?
js html5 canvas制作多个小球碰撞的动画效果
Shiro 教程,Ajax请求拦截跳转页面方案
老炮儿下载,天使恶棍下载,终结者5,坏蛋必须死
json-lib 的 maven dependency 引入及Jar包下载
网站如何设置404页面、500等错误页面,有什么漏洞?怎么预防?
Javascript模块化编程,本站使用 require.js 优化JS加, require.js下载
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程
最新文章
新浪短链(t.cn)最新申请官方API的方法讲解。 232
QUIC / HTTP3 协议详细分析讲解 1341
恭喜那个做云存储的七牛云完成 F 轮 10 亿人民币的融资,开启新的云旅程 2019
Autojs怎么安全加密?Autojs在线加密工具注意事项。 2965
Java JSON 组件选型之 FastJson 为什么总有漏洞? 8905
使用七牛云存储实现图片API,自动删除图片方案合集 2627
神速ICP备案经验分享,ICP备案居然一天就通过了 3965
百度加强推送URL链接,百度SEO强行推送链接JavaScript代码案例讲解。 4126
SOJSON 拓展服务器被DDos攻击了一晚上,是如何解决的? 4976
湖南地区备案“新增网站需提交组网方案或解释说明”,关于备案做简单叙述 5331
最热文章
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 468501
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 434636
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 365618
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 361110
免费天气API,天气JSON API,不限次数获取十五天的天气预报 324171
Elasticsearch教程(四) elasticsearch head 插件安装和使用 240648
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 205431
谈谈斐讯路由器劫持,你用斐讯路由器,你需要知道的事情 148108
Elasticsearch教程(一),全程直播(小白级别) 128254
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 106815

骚码加入我们 / 千人QQ群:259217951

入群需要5元为的是没有垃圾广告,如果没有QQ钱包,可以加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...