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

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery取消特定的click事件
這篇文章主要介紹了jQuery取消特定的click事件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery簡(jiǎn)單實(shí)現(xiàn)事件綁定及取消事件綁定的相關(guān)技巧,需要的朋友可以參考下
2016-02-02
jquery.Callbacks的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹的是jQuery.Callback()的實(shí)現(xiàn),這個(gè)函數(shù)常見(jiàn)的應(yīng)用場(chǎng)景是事件觸發(fā)機(jī)制，也就是設(shè)計(jì)模式中的觀察者（發(fā)布、訂閱機(jī)制），目前Callbacks對(duì)象用于queue、ajax、Deferred對(duì)象中，下面通過(guò)這篇文章來(lái)詳細(xì)看看關(guān)于jquery.Callbacks實(shí)現(xiàn)的介紹吧。
2016-11-11
jquery中g(shù)et和post的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中g(shù)et和post的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery UI AutoComplete 使用說(shuō)明
在 jQuery UI 的最近更新中增加了自動(dòng)完成控件 AutoComplete，這為我們提供了又一個(gè)強(qiáng)大的開(kāi)發(fā)工具，這里介紹一下這個(gè)控件的使用方式。
2011-06-06
一句jQuery代碼實(shí)現(xiàn)返回頂部效果（簡(jiǎn)單實(shí)用）
本文主要分享了利用一句jQuery代碼實(shí)現(xiàn)返回頂部效果的實(shí)例。代碼簡(jiǎn)單，保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來(lái)看下吧
2016-12-12
詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過(guò)jQuery示例代碼演示outerWidth()函數(shù)的具體用法，介紹的非常詳細(xì)，有需要的朋友可以借鑒
2015-07-07
用jQuery實(shí)現(xiàn)優(yōu)酷首頁(yè)輪播圖
本文主要介紹了用jQuery實(shí)現(xiàn)優(yōu)酷首頁(yè)輪播圖的思路與方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
Jquery 設(shè)置標(biāo)題的自動(dòng)翻轉(zhuǎn)
我們平時(shí)在開(kāi)發(fā)web程序的時(shí)候，想把一個(gè)新聞源滾動(dòng)顯示新聞的條目的標(biāo)題及內(nèi)容摘要，而且是每次一條，有點(diǎn)類似csdn的滾動(dòng)廣告。
2009-10-10
JQuery中html()方法使用不當(dāng)帶來(lái)的陷阱
html方法當(dāng)不傳參數(shù)時(shí)用來(lái)獲取元素的html內(nèi)容
2011-04-04
jQuery中next()方法用法實(shí)例
這篇文章主要介紹了jQuery中next()方法用法,實(shí)例分析了next()方法的功能、定義及獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下
2015-01-01