.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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

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