<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>

$(function(){
var oLeft=parseInt(/\d+/.exec($("div").css("left"))[0]);
var oTop=parseInt(/\d+/.exec($("div").css("top"))[0]);

setInterval(function(){
$("div").animate({opacity:'toggle'}, 500);
},500);

setInterval(function(){

runDemo($("div"),oLeft,oTop,300,200);

},20);

});
function runDemo(moveDiv,oLeft,oTop,bWidth,bHeight){

var width=bWidth+parseInt(oLeft),height=bHeight+parseInt(oTop);

if((/\d+/.exec(moveDiv.css("left"))<width&&/\d+/.exec(moveDiv.css("left"))>=oLeft) && /\d+/.exec(moveDiv.css("top"))==oTop){
moveDiv.css({"left":"+=1"+"px"});
}else if(/\d+/.exec(moveDiv.css("left"))==width&&(/\d+/.exec(moveDiv.css("top"))>=oTop&&/\d+/.exec(moveDiv.css("top"))<height)){
moveDiv.css({"top":"+=1"+"px"});
}else if((/\d+/.exec(moveDiv.css("left"))<=width&&/\d+/.exec(moveDiv.css("left"))>oLeft)&&/\d+/.exec(moveDiv.css("top"))==height){
moveDiv.css({"left":"-=1"+"px"});
}else if(/\d+/.exec(moveDiv.css("left"))==oLeft&&(/\d+/.exec(moveDiv.css("top"))<=height&&/\d+/.exec(moveDiv.css("top"))>=oTop)){
moveDiv.css({"top":"-=1"+"px"});
}
}
</script>

</head>
<body>
<div style='width:50px;height:25px;position:absolute;top:10px;left:10px;'>hello</div>
</body>
</html>
算法有点复杂，求大神简化

jquery 层根据矩形路径移动和闪耀（原创）的更多相关文章

  1. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  2. linux2.6.24内核源代码分析（2）——扒一扒网络数据包在链路层的流向路径之一

    在2.6.24内核中链路层接收网络数据包出现了两种方法,第一种是传统方法,利用中断来接收网络数据包,适用于低速设备:第二种是New Api(简称NAPI)方法,利用了中断+轮询的方法来接收网络数据包, ...

  3. MVC中JQuery文件引入的路径问题，@Url.Content函数

    今天写了个MVC的Demo,文件夹结构很简单,如下: 利用EF生成Model框架并手工加表字段注解,但在页面上JS验证始终没显示.实在无语. 无意中在浏览器里按F12,看见提示:   Failed t ...

  4. [Django] html 前端页面jQuery、图片等路径加载问题

    严格的说这个话题应该属于一个html前端路径加载问题.为了实现一个局部更新页面的功能,简单了解了一下Ajax.Ajax是一个为了实现浏览器和服务器异步通信功能的模块.严格来说不是一个新的语言,只是JS ...

  5. jsp jquery js 的基本路径获取

    引子:js中需要当前页面的基础路径,获取不到request,可以通过如下方法来解决!   1.jsp基础路径,在jsp头部加上,获取基础路径http://localhost:8080/project/ ...

  6. jquery层居中,点击小图查看大图,弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  8. jquery 直接访问图片路径

    jQuery("#img").attr("src",function(){return this.src+"?"});

  9. tomcat对请求路径的匹配过程(原创)

    1.匹配服务 如果有两个应用,一个应用只能通过80端口访问,另一个应用只能通过8080端口访问,这种情况下,可以分开两个服务,然后分别创建80端口和8080端口的连接器. 2.匹配主机 一个服务下配置 ...

随机推荐

  1. Mysql notes

    1. 数据库操作 database management create database sampleDatabase; --创建数据库sampleDatabase show databases; - ...

  2. 个人博客作业Week2

    一.是否需要有代码规范 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我反驳这个观点,这些规范是成千上万的程序员在开发程序中总结出来的代码规范,他有助于我们的开 ...

  3. JS中判断 !="" 或者 !=null 失效

    var id; //... if (!id&& typeof (id) != "undefined" && id!= 0) { //id为null ...

  4. easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

    在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点 ...

  5. 新手如何查看API文档？

    Java API文档为例: 1:知道包名,可以在Overview里直接找到这个包,然后去查这个包下面的类和方法.2:知道类名和方法名,可以在Index.html里直接去找这个类或方法,然后查看.3:如 ...

  6. Android6.0之来电转接号码显示修改

    Android6.0之来电转接号码显示修改 手机来电转接界面是在,点开Dialer-搜索框右边的三个点-设置-通话账户(要先插卡)-中国移动或者中国联通--来电转接--第一行,显示始终转接 将所有来电 ...

  7. HTML5 十大新特性(七)——拖放API

    拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲. 一.拖动的源对象(source)可以触发的事件 dragstart:拖动开始 drag:拖动进行中 dragend:拖动结束 ...

  8. laravel 5.2 引入第三方类

    composer 安装类依赖包 很受用 也很方便 但是要是一个有一定规模的公司技术团队 因为要照顾大局 还是引入类好些 下面是引入类的方法 1.首先在app目录下创建一个新的文件夹,命名Tools(可 ...

  9. 去掉文件夹的.svn文件

    加注册表 代码为: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE"SOFTWARE"Classes"F ...

  10. 在VMware8.0.4安装centos6.3出现蓝屏，显示“anaconda: Fatal IO error 104 (Connection reset by peer) on X server :1.0. install exited abnormally [1/1]”？

    解决方案:在创建虚拟机时选择“自定义(高级)”,然后点击“下一步”,在弹出的对话框中,在硬件兼容性该项选择 Workstation6.5-7.x.如果创建虚拟机时选择“标准”,默认的硬件兼容性将是Wo ...