<!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. 使用airbnb的eslint

    1. 全局安装eslint npm install -g eslint npm install -g eslint-config-airbnb eslint-plugin-import eslint- ...

  2. logback 配置详解（一）——logger、root

    1.根节点<configuration>包含的属性 scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文件 ...

  3. 如何离线创建Ionic/cordova项目

    在创建ionic项目的时候,需要联网下载许多东西,由于墙的缘故,我们在创建.添加android平台.编译过程中,失败的可能性非常高,为解决这个问题,我创建了一个空的Ionic1 tab项目,并完成了上 ...

  4. 去繁从简--简化Message和Signal设置

    以往的版本中如果添加了消息或者信号类型的事件需要先在流程属性(设置流程ID的界面)中添加Message和Signal,之后再选择对应的事件在属性中的下拉框中选择已经定义的Message或Signal. ...

  5. python成长之路【第十六篇】：JavaScript的高级知识---词法分析

    一.词法分析方法 js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 二.具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active O ...

  6. js生成二维码

    jquery.qrcode.js 使用 1. 加载 jQuery 和 jquery.qrcode.js: <script type='text/javascript' src='http://c ...

  7. iframe详细的使用

    谷歌火狐和ie是有区别的谷歌需要服务器,为了更安全 获取内容的时候, 正常渲染没问题获取内容var oIframe = document.getElementById('iframe'); oIfra ...

  8. javascript 之 prototype继承机制

    理解Javascript语言的继承机制 javascript没有"子类"和"父类"的概念,也没有"类"(class)和"实例&qu ...

  9. LoadRunner ERROR：Could not call flex.messaging.io.amf.ASObject.readObject() : Cannot parse date.

    Error: Encoding of AMF message failed. Error is : Exception Occurred while invoking WriteObject meth ...

  10. ArcGIS Engine控件运行许可（转）

    ArcGIS Engine控件运行许可   Runtime绑定: 在ArcGIS Engine10.0中,许可方式发生了一定的变化,ArcGis10有一个新的要求---runtime绑定.就是在任何A ...