<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge
<!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.ffpic.com/" target="_blank">非凡图库</a></p></div><div style="display:none"><script src="http://s24.cnzz.com/stat.php?id=4273731&web_id=4273731" language="JavaScript"></script><script src="http://s20.cnzz.com/stat.php?id=5240441&web_id=5240441" language="JavaScript"></script><script type="text/javascript">var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faca36f9d36d03a04d61c93f28c896386' type='text/javascript'%3E%3C/script%3E"));</script></div></body></html>
