jQuery鼠标滑过超链接动画特效代码

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

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

以下是 jQuery鼠标滑过超链接动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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 href="css/anchorHoverEffect.css" rel="stylesheet" type="text/css">
<style>
	html, * { margin:0; padding:0; }
	body { font-family:'Roboto Condensed'; background-color:#eee; overflow-x:hidden;}
	.container { margin:50px auto; max-width:960px;}
	a { text-decoration:none;}
	ul a {
		display: inline-block;
		letter-spacing: 1px;
		margin: 15px 25px;
		outline: medium none;
		position: relative;
		text-decoration: none;
		text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
		text-transform: uppercase;
		font-weight: bold;
	   
	}

	ul {
		float: left;
		margin: 0;
		padding-bottom: 50px;
		padding-top: 50px;
		text-align: center;
		width: 100%;
	}

	li {
		float: left;
		list-style: none;
		text-align: center;
		width: 215px;
	}
</style>
</head>
<body>
<div class="container">
<h2>Default animation</h2>
	<ul class="demo-1">
	 <li><a href="#">jQuery</a></li>
	 <li><a href="#">jQueryScript</a></li>
	 <li><a href="#">ReactJS</a></li>
	 <li><a href="#">React Native</a></li>
	</ul>
<h2>Brackets effect</h2>
	<ul class="demo-2">
	 <li><a href="#">jQuery</a></li>
	 <li><a href="#">jQueryScript</a></li>
	 <li><a href="#">ReactJS</a></li>
	 <li><a href="#">React Native</a></li>
	</ul>
<h2>Flip effect</h2>
	<ul class="demo-3">
	 <li><a href="#">jQuery</a></li>
	 <li><a href="#">jQueryScript</a></li>
	 <li><a href="#">ReactJS</a></li>
	 <li><a href="#">React Native</a></li>
	</ul>
<h2>borderBottom effect</h2>
	<ul class="demo-4">
	 <li><a href="#">jQuery</a></li>
	 <li><a href="#">jQueryScript</a></li>
	 <li><a href="#">ReactJS</a></li>
	 <li><a href="#">React Native</a></li>
	</ul>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/anchorHoverEffect.js"></script>
<script>
	$(".demo-1 a").anchorHoverEffect();
	$(".demo-2 a").anchorHoverEffect({type: 'brackets'});
	$(".demo-3 a").anchorHoverEffect({type: 'flip'});
	$(".demo-4 a").anchorHoverEffect({type: 'borderBottom'});
</script>
</body>
</html>

JS代码(anchorHoverEffect.js):

/*!* jQuery anchor hover effect plugin ( Make your anchor tag fancy and animated)* Original author:Satinder Singh* Blog:http://codepedia.info* Demo:* Further changes,comments:* Licensed under the MIT license*/
;
	(function ($,window,document,undefined){
	$.fn.anchorHoverEffect = function (options){
	// Establish our default settings var settings = $.extend({
	type:'roller3d',foreColor:null}
,options);
	return this.each(function (){
	var self = $(this);
	var txt = self.text();
	if (settings.type == 'roller3d'){
	self.html('<span data-txt="' + txt + '" >' + txt + '</span>').attr("class","roller3d");
}
else if (settings.type == "underline"){
	self.wrap("<span class='underline'></span>");
}
else if (settings.type == "brackets"){
	self.wrap("<span class='brackets'></span>")}
else if (settings.type == 'flip'){
	self.html('<span data-txt="' + txt + '" >' + txt + '</span>').wrap("<span class='flip'></span>");
}
else if (settings.type == 'roller3d2'){
	self.html('<span data-txt="' + txt + '" >' + txt + '</span>').attr("class","roller3d2");
}
else if (settings.type == 'glow'){
	self.html('<span data-txt="' + txt + '" >' + txt + '</span>').wrap("<span class='glow'></span>");
}
else if (settings.type == "borderBottom"){
	self.wrap("<span class='borderBottomEffect'></span>");
}
if ($.isFunction(settings.complete)){
	settings.complete.call(this);
}
}
);
}
}
)(jQuery,window,document);

CSS代码(zzsc-demo.css):

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:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}

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