jQuery实现流动虚线框的方法_jq 流动的线的效果-CSDN博客

<html>

<style>
.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;}

</style>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<title >点击按钮选中文本框的内容</title>

<body>

<form>
<div align="center">
<textarea name="yourForm" rows=3 cols=40 wrap=virtual id="t">
codefans.net 提示：这里是测试文本......</textarea>
<br>
<br>
<input type=button value="全选内容" onClick="javascript:document.getElementById('t').focus();document.getElementById('t').select();">
</div>
</form>

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

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

</script>
</body>

</html>