jQuery实现流动虚线框的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了jQuery实现流动虚线框的方法。分享给大家供大家参考。具体分析如下:

在百度UEditor的首页看到一个流动的虚线框的效果,所以自己用jQuery尝试也写一个,效果如下:

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

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jquery 设置style:display的方法
Jan 29 #Javascript
jQuery获取样式中颜色值的方法
Jan 29 #Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 #Javascript
JS清除选择内容的方法
Jan 29 #Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 #Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 #Javascript
jQuery中$.each使用详解
Jan 29 #Javascript
You might like
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP自定义函数收代码
2010/08/01 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
用js重建星际争霸
2006/12/22 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python selenium循环登陆网站的实现
2019/11/04 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
自我反省检讨书
2014/01/23 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
论文致谢词范文
2015/05/14 职场文书
入党介绍人考察意见
2015/06/01 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python