JQuery-js tutorial

This article mainly introduces jQuery's method of implementing the flow dashed box, which can achieve the effect of the flow dashed box on the Baidu UEditor homepage and has some reference value, for more information, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

On the Baidu UEditor homepage, you can see the effect of a mobile dotted box. Therefore, you can use jQuery to write a text box. 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:

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 jQuery programming.