网页炫酷背景 - 蓝蓝设计_UI设计公司

帝皇彩票官网

网页炫酷背景

2020-3-1 前端达人 前端及开发文章及欣赏

前言:
做网页项目时想要背景是动态的,推荐两个我觉得比较可以的js动态背景。

随鼠标的移动而移动的线条,具体效果看图:

点击查看原图




你焦点在哪,那么那里的线条就会汇聚到你的焦点处。
用法:将js声明到body内即可,我是放置在body底部的
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
1

可以鼠标点击产生字的,如图:

点击查看原图

用法和第一个类似,不过在这个js文件前得先引入jquery:


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
			/* 鼠标特效 */
			var a_idx = 0;
			jQuery(document)
					.ready(
							function($) {
								$("body")
										.click(
												function(e) {
													var a = new Array("@健身",
															"@学习", "@机车",
															"@摄影", "@自由",
															"@考研", "@自律",
															"@独立", "@厨艺",
															"@橘子", "@交友",
															"@爱媳妇", "@爱家人");
													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放入本地文件再引入,直接访问网络上的jq即可,还有就是点击产生的字可以自行修改。

————————————————
版权声明:本文为CSDN博主「helllolsy」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/CodingNO1/article/details/104572143

标签: JQuery html

Powered by sitemap
利来彩票开户 吉利彩票计划 博发彩票开奖 帝皇彩票官网 状元彩票计划 吉利彩票登陆 桔子彩票注册 吉利彩票开户 桔子彩票网址 湖南快乐十分走势