信鸽网

jQuery实现流动虚线框的方法

  作者：bea

本文实例讲述了jQuery实现流动虚线框的方法。分享给大家供大家参考。具体分析如下： 在百度UEditor的首页看到一个流动的虚线框的效果，所以自己用jQuery尝试也写一个，效果如下： css: .dashed-box{width:500px;height:100px;overflow:hidden;position:relative;}.dashed-top{width:2000px;height:0px;border-bottom:2px #ccc dashed;p

本文实例讲述了jQuery实现流动虚线框的方法。分享给大家供大家参考。具体分析如下：


在百度UEditor的首页看到一个流动的虚线框的效果，所以自己用jQuery尝试也写一个，效果如下：


css:




.dashed-box{width:500px;height:100px;overflow:hidden;position:relative;}

.dashed-top{width:2000px;height:0px;border-bottom:2px #ccc dashed;position:absolute;top:0;left:-1400px;}

.dashed-left{width:0px;height:2000px;border-left:2px #ccc dashed;position:absolute;left:0;top:-1600px;}

.dashed-bottom{width:2000px;height:0px;border-bottom:2px #ccc dashed;position:absolute;left:0px;bottom:0;}

.dashed-right{width:0px;height:2000px;border-left:2px #ccc dashed;position:absolute;right:0;top:-1600px;}


HTML:





<div class="dashed-box">

<div class="dashed-top"></div>

<div class="dashed-left"></div>

<div class="dashed-right"></div>

<div class="dashed-bottom"></div>

</div>


jQuery：




setInterval(function(){

 var $left=$(".dashed-top").css("left");

 var $top=$(".dashed-bottom").css("left");

 $left=parseInt($left);

 $top=parseInt($top);

 if($left<0){

  $left+=2;

 }else{

  $left=-1400;

 }

  

 if($top>-1000){

  $top-=2;

 }else{

  $top=0;

 }

 $(".dashed-top").css("left",$left+"px");

 $(".dashed-right").css("top",$left+"px");

 $(".dashed-bottom").css("left",$top+"px");

 $(".dashed-left").css("top",$top+"px");

},60);


希望本文所述对大家的jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: