The method of realizing the flow dashed box in jquery _jquery

The example of this article describes the method of jquery implementing the floating dotted box. Share to everyone for your reference. The specific analysis is as follows:

Baidu Ueditor on the home page to see a flow of dotted box effect, so you try to use jquery also write a, the effect is as follows:

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);

I hope this article will help you with your jquery programming.