<!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. Mifare系列6-射频卡与读写器的通信（转）

    文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/38085415 1. 复位应答(Answer to request) 读写器呼叫磁 ...

  2. XML特殊符号

    在XML中"<" 字符和"&"字符是严格禁止使用的.要使用这几种字符需要使用它们的实体, 下面是五个在XML文档中预定义好的实体:< < ...

  3. How to fix the conflict between ROS Python and Conda

    Problem: Ever since I have installed Conda, ROS does not seem to work. And predictably it is because ...

  4. 一个div里有多个a标签，改变a标签的字体颜色方法

    <script type="text/javascript">var all=document.getElementById("big");var ...

  5. UVA Open Credit System Uva 11078

    题目大意:给长度N的A1.....An 求(Ai-Aj)MAX 枚举n^2 其实动态维护最大值就好了 #include<iostream> #include<cstdio> u ...

  6. Deep Learning 25：读论文“Network in Network”——ICLR 2014

    论文Network in network (ICLR 2014)是对传统CNN的改进,传统的CNN就交替的卷积层和池化层的叠加,其中卷积层就是把上一层的输出与卷积核(即滤波器)卷积,是线性变换,然后再 ...

  7. angularJS 学习之路

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口  作用在什么标签或者整个body ...

  8. 重写toString()方法来描述一个类

    package com.zch.test; /* toString方法以及重写toString方法 toString方法是一个自我描述方法 方法本身返回的是该对象的实现类的 类名 + @ + hash ...

  9. json_encode 中文乱码

    用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似"\u***"的格式, 还会在一定程度上增加传输的数据量. 而在PHP5.4, 这个问题终 ...

  10. CSS+Javascript

    今天做了一个简单的CSS和Javascript的调用,发现CSS和Javascript系统的来写还真是蛮方便的. 1.先建一个CSS文件和一个JS文件 2.在jsp中调用 <link type= ...