jQuery绚丽霓虹灯文字特效代码

来源:https://www.sucaihuo.com/js/1311.html 2017-02-05 19:24浏览(904) 收藏

novacancy.js是一款非常有意思的、效果绚丽的jQuery绚丽霓虹灯文字特效插件。该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光闪烁的频率等等。
jQuery绚丽霓虹灯文字特效代码
分类:文字特效 > 文字动画 难易:
查看演示 下载资源 下载积分: 20 积分
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery绚丽霓虹灯文字特效插件</title>
	<link rel="stylesheet" href="css/html5reset-1.6.1.css" type="text/css" media="screen,print">
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="css/demo.css" rel="stylesheet" type="text/css">
	<link href='http://fonts.useso.com/css?family=Monoton' rel='stylesheet' type='text/css'>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1 id="demo-title">jQuery绚丽霓虹灯文字特效插件 <p id="demo-desc">A Text Neon Golden effect jQuery plug-in</p></h1>
		</header>
		<div class="htmleaf-content">
			<div class="board">
			    <p id="no">No</p>
			    <p id="vacancy">Vacancy</p>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.novacancy.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#demo-title").novacancy({
				'blink': 1,
				'off': 1,
				'color': '#e64e8e',
				'glow': ['0 0 80px #fbda72', '0 0 30px #dd571b', '0 0 6px #4c5692']
			});
			$("#demo-desc").novacancy({
				'reblinkProbability': 0.1,
				'blinkMin': 0.2,
				'blinkMax': 0.6,
				'loopMin': 8,
				'loopMax': 10,
				'color': '#ffffff',
				'glow': ['0 0 50px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']
			});
			$('#no').novacancy({
				'reblinkProbability': 0.1,
				'blinkMin': 0.2,
				'blinkMax': 0.6,
				'loopMin': 8,
				'loopMax': 10,
				'color': '#ffffff',
				'glow': ['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']
			}); 

			$('#vacancy').novacancy({
				'blink': 1,
				'off': 1,
				'color': 'Red',
				'glow': ['0 0 80px Red', '0 0 30px FireBrick', '0 0 6px DarkRed']
			});
		});
	</script>
</body>
</html>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2