原生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、查看效果。