jquery 内边框设置

最新推荐文章于 2020-09-03 17:03:29 发布
编程之上
最新推荐文章于 2020-09-03 17:03:29 发布
阅读量2.7k
点赞数
分类专栏：前端开发
本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/45063195
版权
前端开发专栏收录该内容
26 篇文章
订阅专栏
本文详细介绍了如何使用jQuery库来动态地设置和修改元素的内边距，包括上下左右四个方向，帮助开发者实现更灵活的页面布局和交互效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 内边框设置</title>
<style type="text/css">
	*{margin:0;padding:0;list-style-type:none;}
	a,img{border:0;}
	img{max-width:100%; width:auto\9; height:auto; vertical-align:middle; border:0; -ms-interpolation-mode:bicubic;}
	body{ font-family:"Microsoft yahei",arial; font-size: 14px; text-align: center;}
	.wrapper{width: 1000px; margin:50px auto; text-align:left;}
	ul{ margin:0; padding:0; list-style: none;}
	.clearfix:before,.clearfix:after{ display:table; content:'';}
	.clearfix:after{overflow: hidden; clear: both;}
	.clearfix{zoom:1;}
	.clear{clear: both;}
	.imgBox li{ width:160px; float: left; margin:0 15px 15px 0; padding:5px;}
	.imgBox li .img a{ display: block;}
	.imgBox li .img img {width: 160px; height: 160px;}
	.imgBox li .name{height: 30px; line-height: 30px; text-align: center;}
	.imgBox li .name a{color: #333; text-decoration: none;}
	.imgBox li .name a:hover{color:green; text-decoration: none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript">
// 插件
;(function($) {
	// 定义名称
	$.fn.borderAnimate = function(options){
		// 设置默认参数
		var defaults = {
			animated: 'easeOutElastic',		// 动画名称
			speed: 1500,						// 延迟时间
			borderClass: 'imgBd', 			// 边框的样式
			borderWidth: 5,					// 边框的宽度与长度
			borderStyle: 'dashed',			//边框的形式
			borderColor: 'orange',			// 边框的颜色
			zIndex:1
		};
		// 可自定义参数设置
		var options = $.extend({},defaults,options);
		return this.each(function(i){
			var _this = $(this);
			// 判断边框html时候存在，其实就是自动加上
			if(!_this.hasClass('.' + options.borderClass)){
				var border = $("<div />", {
					"class": options.borderClass,
					"css":{
						"position": "absolute",
						"display": "block",
						"border-width": options.borderWidth,
						"border-style": options.borderStyle,
						"border-color": options.borderColor,
						"top": 0,
						"bottom": 0,
						"right": 0,
						"left": 0,
						"opacity": "0",
						"z-index": options.zIndex,
						"width":_this.outerWidth() - options.borderWidth * "2" + "px",
						"height":_this.outerHeight() - options.borderWidth * "2" + "px"
					}
				});
				_this.append(border);
			}
			_this.css('position','relative');
			_this.hover(function(){
				// 移入效果
				_this.find('.' + options.borderClass).stop(false,true).animate({
					"border-width": options.borderWidth + "px",
					"opacity": "1"
				}, {
					"duration": options.speed,
					"queue": false,
					"easing":options.animated
				});
			},function(){
				// 移出效果
				_this.find('.' + options.borderClass).stop(false,true).animate({
					"border-width": "0px",
					"opacity": "0"
				}, {
					"duration": 0,
					"queue": false,
					"easing":options.animated
				});
			});
		});
	};
})(jQuery);
</script>
<script>
	$(function(){
		$('.imgBox li').borderAnimate();
	});
</script>
</head>
<body>
<div class="wrapper">
	<ul class="clearfix imgBox">
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
		<li>
			<div class="img">
				<a href="javascript:;" target="_blank">
					<img src="http://img0.bdstatic.com/img/image/c2ec489f509fcbf92d6f2d5e9a96a7ea1409130769.jpg" alt="">
				</a>
			</div>
			<div class="name">
				<a href="javascript:;" target="_blank">成为海贼王的男人!!!</a>
			</div>
		</li>
	</ul>
</div>
</body>
</html>