jQuery响应式线条滑出列表特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery响应式线条滑出列表特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)