边框逐渐显示效果

最新推荐文章于 2022-12-05 11:58:13 发布

詹小布

最新推荐文章于 2022-12-05 11:58:13 发布

阅读量255

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zaxxm/p/5299214.html

版权

公司最近有一个商城的项目，需要这效果，本来想偷懒在网上找一下有没有插件什么的用一下，然后没找到，好吧，只有靠自己想了。

我的想法是在一个div中放4个div，然后将里面的4个div用position属性放在外面div的上左下右四个位置，然后用jquery的animate的方法，当鼠标移动到最外面的div上时4个位置的div按照顺序呢显示出来。当鼠标移出时，再根据鼠标在div上停留的时间来确定从哪一个位置开始反向执行动画。具体代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.main{width:200px;height:200px;margin:100px auto;position: relative}
.div{
position: absolute;
background-color: #000000;
}
.top{
top: 0;
left: 0;
height: 2px;
width: 0;
}
.right{
right: 0;
top: 2px;
width: 2px;
height: 0;
}
.bottom{
bottom: 0;
right: 2px;
width: 0;
height: 2px;
}
.left{
left: 0;
bottom: 2px;
width: 2px;
height: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="top div"></div>
<div class="right div"></div>
<div class="bottom div"></div>
<div class="left div"></div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
var time=1000;
var hoverTime=0;
$(".main").hover(function(){
$(".div").stop();
hoverTime=new Date();
$(".top").animate({
width:"200px"
},time,function(){
$(".right").animate({
height:"198px"
},time,function(){
$(".bottom").animate({
width:"198px"
},time,function(){
$(".left").animate({
height:"196px"
},time)
})
})
})
},function(){
var nowTime=new Date();
var howLong=nowTime.getTime()-hoverTime.getTime();
console.log(howLong)
if(howLong>3000){
$(".div").stop();
$(".left").animate({
height:0
},time,function(){
$(".bottom").animate({
width:0
},time,function(){
$(".right").animate({
height:0
},time,function(){
$(".top").animate({
width:0
},time)
})
})
})
}else if(howLong<=3000&&howLong>2000){
$(".div").stop();
$(".bottom").animate({
width:0
},time,function(){
$(".right").animate({
height:0
},time,function(){
$(".top").animate({
width:0
},time)
})
})
}else if(howLong>1000&&howLong<=2000){
$(".div").stop();
$(".right").animate({
height:0
},time,function(){
$(".top").animate({
width:0
},time)
})