<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery响应式线条滑出列表特效 - 网页模板</title>
<script src="js/jquery.min.js"></script>
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
.box { width: 1190px; margin: 0 auto; padding-top: 50px; height: 300px; }
.border_animation { border: 1px solid #eee; width: 220px; height: 260px; float: left; margin-right: 10px; position: relative; }
.border_animation .border_top { position: absolute; height: 1px; width: 0; font-size: 0; background: #666666; top: 0; left: 0; transition: all 0.5s ease-out; }
.border_animation .border_right { position: absolute; height: 0px; width: 1px; font-size: 0; background: #666666; bottom: 0; right: 0; transition: all 0.5s ease-out; }
.border_animation .border_bottom { position: absolute; height: 1px; width: 0px; font-size: 0; background: #666666; right: 0; bottom: 0; transition: all 0.5s ease-out; }
.border_animation .border_left { position: absolute; height: 0px; width: 1px; font-size: 0; background: #666666; left: 0; top: 0; transition: all 0.5s ease-out; }
.eva-switchable-panels img { display: block; }
.box .hover .border_top,.box .hover .border_bottom { width: 220px}
.box .hover .border_left,.box .hover .border_right { height: 260px}
</style>
<body>
<div class="box">
<div class="border_animation">
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
<div>
<a target="_blank" href="#">
<img width="220" height="260" alt="" src="images/123.jpg">
</a>
</div>
</div>
<div class="border_animation">
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
<div>
<a target="_blank" href="#">
<img width="220" height="260" alt="" src="images/123.jpg">
</a>
</div>
</div>
<div class="border_animation">
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
<div>
<a target="_blank" href="#">
<img width="220" height="260" alt="" src="images/123.jpg">
</a>
</div>
</div>
<div class="border_animation">
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
<div>
<a target="_blank" href="#">
<img width="220" height="260" alt="" src="images/123.jpg">
</a>
</div>
</div>
<div class="border_animation">
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
<div>
<a target="_blank" href="#">
<img width="220" height="260" alt="" src="images/123.jpg">
</a>
</div>
</div>
</div>
<script>
$(function(){
$(".border_animation").mouseenter(function(){
$(this).addClass("hover");
});
$(".border_animation").mouseleave(function(){
$(this).removeClass("hover");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
