欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

鼠标悬停边框围绕效果动态边框的代码实现

程序员文章站 2022-03-13 12:13:05
鼠标悬停边框围绕效果动态边框的代码实现

鼠标悬停边框围绕效果动态边框的代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停边框围绕效果</title>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
	list-style:none;
}
img {
	border:0;
	width:300px;
	height:150px;
}
.box {
	width:300px;
	height:150px;
	margin:20px auto;
	position:relative;
	border:1px solid #eee;
}
.box .border-left {
	width:1px;
	height:0px;
	background:black;
	position:absolute;
	left:-1px;
	bottom:0;
}
.box .border-bottom {
	width:0px;
	height:1px;
	background:black;
	position:absolute;
	left:0;
	bottom:0px;
}
.box .border-top {
	width:0px;
	height:1px;
	background:black;
	position:absolute;
	right:0;
	top:0px;
}
.box .border-right {
	width:1px;
	height:0px;
	background:black;
	position:absolute;
	right:-1px;
	top:0;
}
</style>
</head>
<body>
<p class="box">
    <img src=https://www.2cto.com/uploadfile/2018/0409/20180409114633569.jpg">
    <p class="border-left"></p>
    <p class="border-bottom"></p>
    <p class="border-top"></p>
    <p class="border-right"></p>
</p>
<p class="box">
    <img src=https://www.2cto.com/uploadfile/2018/0409/20180409114633569.jpg">
    <p class="border-left"></p>
    <p class="border-bottom"></p>
    <p class="border-top"></p>
    <p class="border-right"></p>
</p>


<script>
$(function() {
    var lanren_width = $('.box').width();
    var lanren_height = $('.box').height();
    $('.box').each(function() {
        $(this).hover(function() {
            $(this).find('.border-left,.border-right').stop().animate({
                height: lanren_height + 'px'
            }, 400);
            $(this).find('.border-top,.border-bottom').stop().animate({
                width: lanren_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>

</body>
</html>

鼠标悬停边框围绕效果动态边框的代码实现