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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
js自定义瀑布流布局插件
May 16 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
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反射应用示例
2014/02/25 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python批量生成本地ip地址的方法
2015/03/23 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
公开服务承诺制度
2014/03/26 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript