jQuery边框渐变显示特效js代码

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

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

以下是 jQuery边框渐变显示特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>jQuery�߿򽥱���ʾ��Ч</title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.insetborder.js"></script>
		<link href="css/zzsc.css" rel="stylesheet">
		<script type="text/javascript">

			$(document).ready(function(){
				$('a.sample-border1').borderEffect();
				$('a.sample-border2').borderEffect({borderColor : '#ffffff'});
				$('a.sample-border3').borderEffect({borderColor : '#cccccc', speed : 100, borderWidth: 10});
			});

		</script>

	</head>
	<body>
		<ul>
			<li>
				<a href="#" class="sample-border1">
					<img src="img/github-icon.png"/>
				</a>
			</li>
			<li>
				<a href="#" class="sample-border2">
					<img src="img/github-icon.png"/>
				</a>
			</li>
			<li>
				<a href="#" class="sample-border3">
					<img src="img/github-icon.png"/>
				</a>
			</li>
		</ul>
</body>
</html>

JS代码(jquery.insetborder.js):

/*Author:Guilherme OliveiraYou are free to use this plug in in any way you want non-commercially and commercially.However if you redistribute (even when altered by you) you have to give credit to me.How you give me credit is up to you. Here are two links you could link off to:https://twitter.com/_holiveirahttp://ghophp.github.io/OBS:Keep in mind that this plugin requires the hook to a position:relative element*/
(function($){
	$.fn.borderEffect = function(options){
	options = $.extend({
	speed:150,borderWidth:3,borderColor:'#c72526',borderClass:"border-effect",zIndex:100}
,options);
	return this.each(function(i){
	$(this).hover(function(){
	$(this).find('.' + options.borderClass).animate({
	"border-width":options.borderWidth + "px","opacity":"1"}
,{
	"duration":options.speed,"queue":false}
);
}
,function(){
	$(this).find('.' + options.borderClass).animate({
	"border-width":"0px","opacity":"0"}
,{
	"duration":options.speed,"queue":false}
);
}
);
	if($(this).find('.' + options.borderClass).length <= 0){
	var border = $("<div />",{
	"class":options.borderClass,"css":{
	"position":"absolute","display":"block","border":"0px solid " + options.borderColor,"top":0,"bottom":0,"right":0,"left":0,"opacity":"0","z-index":options.zIndex}
}
);
	$(this).append(border);
}
$(this).css('position','relative');
}
);
}
;
}
)(jQuery);

CSS代码(zzsc.css):

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
body{padding:30px;text-align:center;}
ul{list-style:none;margin:0;padding:0;margin:5px auto;width:500px;}
ul li{float:left;display:inline-block;margin:0 15px 0 0;}
ul li a{display:block;}
ul li a img{width:130px;height:130px;}

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