jQuery实现流动虚线框的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery调取json数据实现省市级联的方法

    本文实例讲述了jquery调取json数据实现省市级联的方法.分享给大家供大家参考.具体如下: 使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方): Html代码: jQuery mobile中,有input  list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,in

  • jQuery实现tag便签去重效果的方法

    本文实例讲述了jQuery实现tag便签去重效果的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: 复制代码 代码如下: <head> <script type="text/javascript" src="js/jQuery.js"></script>  <!--jquery引用代码--> <script type="text/javascript" src="j

  • 使用jQuery实现input数值增量和减量的方法

    使用jQuery实现input数值增量和减量的方法

    本文实例讲述了使用jQuery实现input数值增量和减量的方法.分享给大家供大家参考.具体分析如下: 在很多电商网站中,在购物车所在页面,涉及到商品数量的时候,都会提供一个+号按钮和-号按钮来实现增1和减1,并且只允许input中输入数值.Bootstrap TouchSpin这款插件就是针对此需求而写.(Bootstrap TouchSpin这款插件点击此处本站下载.) 首先引入必要的css和js文件. 复制代码 代码如下: <link href="bootstrap/css/boot

  • jquery果冻抖动效果实现方法

    本文实例讲述了jquery果冻抖动效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript">  $(function(){   $("

  • jquery搜索框效果实现方法

    本文实例讲述了jquery搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery:搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascri

  • jQuery+ajax实现动态执行脚本的方法

    本文实例讲述了jQuery+ajax实现动态执行脚本的方法.分享给大家供大家参考.具体分析如下: 有时候,在页面初次加载时就取得所需的全部JavaScript也是没有必要的.具体需要取得哪个脚本,要视用户的操作而定.虽然可以在需要时动态地引人<script>标签,但注人所需代码的更优雅的方式则是通过jQueiy直接加载.js文件. 向页面中注人脚本与加载HTML片段一样简单.但在这种情况下,需要使用全局函数 $.getScript(),这个全局函数与它的同辈函数类似,接受一个URL参数以查找脚

  • Jquery 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果 下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中. 1:为什么要写这个方法 网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkbox可以控制下面的子checkbox,但是下面的子checkbox应该也可以控制上面

  • jQuery老黄历完整实现方法

    jQuery老黄历完整实现方法

    本文实例讲述了jQuery老黄历实现方法.分享给大家供大家参考.具体实现方法分析如下: 先来看看程序运行效果: html页面部分如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <title>jquery老黄历特效 -<

  • jquery隔行换色效果实现方法

    本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javasc

  • jquery实现搜索框常见效果的方法

    本文实例讲述了jquery实现搜索框常见效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery搜索框效果</title> <script type="text/javascript

随机推荐