原生jQuery图片边框线条动画效果

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="aaa">

<a href="#"><img src="christmas.jpg"/></a>

<div class="border-left"></div>

<div class="border-bottom"></div>

<div class="border-top"></div>

<div class="border-right"></div>

</div>

<div class="aaa">

<a href="#"><img src="christmas.jpg"/></a>

<div class="border-left"></div>

<div class="border-bottom"></div>

<div class="border-top"></div>

<div class="border-right"></div>

</div>

4、书写css代码。

<style>

*{margin: 0;padding: 0;list-style: none;}

img{border: 0;}

.aaa{width: 300px;height: 150px;margin: 100px auto;position: relative;border: 1px solid #eee;}

.aaa .border-left{width: 1px;height: 0px;background: #999;position:absolute;left:-1px;bottom: 0;}

.aaa .border-bottom{width: 0px;height: 1px;background: #999;position:absolute;left:0;bottom: 0px;}

.aaa .border-top{width: 0px;height: 1px;background: #999;position:absolute;right:0;top: 0px;}

.aaa .border-right{width: 1px;height: 0px;background: #999;position:absolute;right:-1px;top: 0;}

</style>

5、书写并添加js代码。

<script src='#ajaxjs/jquery.min.js'></script>

<script>

$(function(){

var cccc_width = $('.aaa').width();

var cccc_height = $('.aaa').height();

$('.aaa').each(function(){

$(this).hover(function(){

$(this).find('.border-left,.border-right').stop().animate({height:cccc_height+'px'},400);

$(this).find('.border-top,.border-bottom').stop().animate({width:cccc_width+'px'},400);

},function(){

$(this).find('.border-left,.border-right').stop().animate({height:'0'},400);

$(this).find('.border-top,.border-bottom').stop().animate({width:'0'},400);

});

});

});

</script>

6、代码整体结构。

7、查看效果。