快捷導(dǎo)航

jQuery實(shí)現(xiàn)流動(dòng)虛線框的方法

更新時(shí)間：2015年01月29日 14:49:31 作者：穗溪

這篇文章主要介紹了jQuery實(shí)現(xiàn)流動(dòng)虛線框的方法,可實(shí)現(xiàn)百度UEditor首頁流動(dòng)虛線框的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)流動(dòng)虛線框的方法。分享給大家供大家參考。具體分析如下：

在百度UEditor的首頁看到一個(gè)流動(dòng)的虛線框的效果，所以自己用jQuery嘗試也寫一個(gè)，效果如下：

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

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

您可能感興趣的文章:

相關(guān)文章

在次封裝easyui-Dialog插件實(shí)現(xiàn)代碼
在次封裝easyui-Dialog插件實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-11-11
關(guān)于JQuery($.load)事件的用法和分析
本篇文章小編為大家介紹，關(guān)于JQuery($.load)事件的用法與分析，有需要的朋友可以關(guān)注一下
2013-04-04
jquery.cookie.js 操作cookie實(shí)現(xiàn)記住密碼功能的實(shí)現(xiàn)代碼
jquery.cookie.js操作cookie實(shí)現(xiàn)記住密碼功能，很簡(jiǎn)單很強(qiáng)大，喜歡的朋友可以參考下。
2011-04-04
非常有用的40款jQuery 插件推薦（系列二）
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗(yàn)
2011-12-12
jQuery插件 Jqplot圖表實(shí)例
文章內(nèi)容為初次使用Jqplot圖表插件的測(cè)試代碼，僅供參考。
2016-06-06
JQuery實(shí)現(xiàn)動(dòng)態(tài)漂浮廣告
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)動(dòng)態(tài)漂浮廣告，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
checkbox使用示例
checkbox想必大家對(duì)這個(gè)控件并不陌生吧，畢竟在網(wǎng)頁制作過程中經(jīng)常會(huì)使用到，下面與大家分享個(gè)示例主要介紹checkbox的使用，感興趣的朋友可以參考下
2013-08-08
JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作示例
這篇文章主要介紹了JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作,涉及jquery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下
2019-11-11
jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法,涉及jQuery鼠標(biāo)事件及頁面元素的操作技巧,需要的朋友可以參考下
2015-05-05
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細(xì)介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法，非常的全面細(xì)致，在這里推薦給小伙伴們。
2015-01-01