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 处理 URL 的两个函数代码
Aug 13 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
d3.js实现图形缩放平移
Dec 19 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
加强版phplib的DB类
2008/03/31 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python求解平方根的方法
2015/03/11 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
基于Python函数和变量名解析
2019/07/19 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
重构Python代码的六个实例
2020/11/25 Python
python中常用的数据结构介绍
2021/01/12 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
教师党性分析材料
2014/02/04 职场文书
厨房管理计划书
2014/04/27 职场文书
业务内勤岗位职责
2014/04/30 职场文书
预备党员公开承诺书
2014/05/28 职场文书
防汛通知
2015/04/25 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
MongoDB支持的数据类型
2022/04/11 MongoDB