jQuery鼠标滑过霓虹灯文字高亮特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标滑过霓虹灯文字高亮特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!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" type="text/css" href="css/zzsc-demo.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link async href="http://fonts.googleapis.com/css?family=Warnes" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Zeyada" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Princess%20Sofia" rel="stylesheet" type="text/css"/>

</head>
<body>
<div class="zzsc-content">
	<div class="first_neon">Enjoy NEON</div>
	<div class="second_neon">Enjoy NEON</div>
	<div class="third_neon">Enjoy NEON</div>
</div>
	
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/neon_text.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.first_neon').neonText();
		$('.second_neon').neonText({
			textColor:'white',
			textSize:'40pt',
			neonHighlight:'white',
			neonHighlightColor:'#008000',
			neonHighlightHover:'#FFFF00',
			neonFontHover:'white'
		});
		$('.third_neon').neonText({
			textColor:'white',
			textSize:'40pt',
			neonHighlight:'white',
			neonHighlightColor:'#00FFFF',
			neonHighlightHover:'#7FFF00',
			neonFontHover:'white'
		});
	});
</script>
</body>
</html>

JS代码(neon_text.js):

/*------------------------------------------------------------*/
/*- textColor - Цвет текста ----------------------------------*/
/*- textSize - Размер текста ---------------------------------*/
/*- neonHighlight - цвет первой начала свечения --------------*/
/*- neonHighlightColor цвет неоновой подсветки ---------------*/
/*- neonHighlightHover - цвет неоновой подсветки при hover ---*/
/*- neonFontHover - цвет шрифта при hover --------------------*/
/*------------------------------------------------------------*/
jQuery.fn.neonText = function(options){
	var options = jQuery.extend({
	textColor:'#FFFFFF',textSize:'40pt',neonHighlight:'#FFFFFF',neonHighlightColor:'#FF00DE',neonHighlightHover:'#00FFFF',neonFontHover:'#FFFFFF'}
,options)return this.each(function(){
	jQuery(this).css('color',options.textColor).css('font-size',options.textSize).css('text-shadow','0 0 10px '+options.neonHighlight+',0 0 20px '+options.neonHighlight+',0 0 30px '+options.neonHighlight +',0 0 40px '+options.neonHighlightColor+',0 0 70px '+options.neonHighlightColor+',0 0 80px '+options.neonHighlightColor+',0 0 100px '+options.neonHighlightColor).hover(function (){
	jQuery(this).css('text-shadow','0 0 10px '+options.neonHighlight+',0 0 20px '+options.neonHighlight+',0 0 30px '+options.neonHighlight+',0 0 40px '+options.neonHighlightHover+',0 0 70px '+options.neonHighlightHover+',0 0 80px '+options.neonHighlightHover+',0 0 100px '+options.neonHighlightHover).css('color',options.neonFontHover);
}
,function (){
	jQuery(this).css('color',options.textColor).css('text-shadow','0 0 10px ' +options.neonHighlight + ',0 0 20px ' +options.neonHighlight + ',0 0 30px ' +options.neonHighlightColor + ',0 0 40px ' +options.neonHighlightColor + ',0 0 70px ' +options.neonHighlightColor + ',0 0 80px ' +options.neonHighlightColor + ',0 0 100px ' +options.neonHighlightColor)}
);
}
);
}
;

CSS代码(zzsc-demo.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.zzsc-content{width:900px;margin:50px auto;}

附件:下载该文件资源,减少时间成本(增值服务)