富贵资源网 Design By www.hznty.com
话不多说、静态效果图如下
实代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.myDiv{
width: 300px;
height: 200px;
border: 1px solid rgba(0,0,0,0.2);
margin: 50px ;
position: relative;
}
.topLine{
width: 0px;
height: 1px;
background: black;
position:absolute;
left: 0;
top: -1px;
}
.bottomLine{
width: 0px;
height: 1px;
background: black;
position:absolute;
left: 0;
bottom: -1px;
}
.leftLine{
width: 1px;
height: 0px;
background: black;
position:absolute;
left: -1;
bottom: -1px;
}
.rightLine{
width: 1px;
height: 0px;
background: black;
position:absolute;
right: -1px;
top: -1px;
}
</style>
</head>
<body>
<div class="myDiv">
<div class="topLine"></div>
<div class="rightLine"></div>
<div class="bottomLine"></div>
<div class="leftLine"></div>
</div>
<div class="myDiv">
<div class="topLine"></div>
<div class="rightLine"></div>
<div class="bottomLine"></div>
<div class="leftLine"></div>
</div>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script>
$(function(){
$(".myDiv").mouseover(function(){
$(this).find(".topLine,.bottomLine").stop().animate({"width":"300px"});
$(this).find(".rightLine,.leftLine").stop().animate({"height":"200px"});
})
$(".myDiv").mouseout(function(){
$(this).find(".topLine,.bottomLine").stop().animate({"width":"0px"});
$(this).find(".rightLine,.leftLine").stop().animate({"height":"0px"});
})
})
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，刚兴趣的朋友们可以自己动手操作下看看动态效果，真的非常不错，希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流，小编会尽快给大家回复。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...