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