基于jquery的一个浮动框(扩展性比较好 )


Posted in Javascript onAugust 27, 2010
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
body 
{ 
height:2000px; 
} 
.float_mx{ 
background:#CCC; 
width:100px; 
height:100px; 
display:none; 
} 
</style> 
</head> 
<body> 
<div class="float_mx"> 
在此添加内容 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function($) { 
$.fn.scrollBox = function(options){ 
var defaultOptions = { 
speed: 0.1, //加速 
time: 16, //移动速度 
top: 200, //默认顶部 
align: 'right', //浮动位置,可选左、右 
mix: 0 //边距 
}; 
var options = $.extend(defaultOptions, options); 
this.each(function(){ 
var obj = $(this); 
init(); 
function init(){ 
obj.css('display', 'block'); 
obj.css('position', 'absolute'); 
obj.css(options.align, options.mix); 
obj.css('top', options.top+'px'); 
obj.css('z-index', '99'); 
move(); 
} 
function back() { 
acceleration = options.speed; 
time = options.time; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x = Math.max(x1, x2); 
var y = Math.max(y1, y2); 
var speed = acceleration; 
return { 
l: x, 
t: y, 
s: speed 
}; 
}; function move(){ 
var tip = obj; 
var old = options.top; 
var pos = back().t; 
pos = pos - $(tip).Coordinate().y + options.top; 
pos = $(tip).Coordinate().y + pos / 10; 
if (pos < options.top) { 
pos = options.top; 
} 
if (pos != old) { 
tip.css('top',pos + "px"); 
} 
old = pos; 
window.setTimeout(function(){move();}, options.time); 
}; 
}); 
}; 
$.fn.Coordinate = function(){ 
var E = $(this)[0]; 
var C = E.offsetTop; 
var B = E.offsetLeft; 
var A = E.offsetWidth; 
var D = E.offsetHeight; 
while (E = E.offsetParent) { 
C += E.offsetTop; 
B += E.offsetLeft; 
} 
return { 
x: B, 
y: C, 
w: A, 
h: D 
}; 
}; 
})(jQuery); 
$('.float_mx').scrollBox(); 
</script> 
</body> 
</html>

把下面这段代理放到单独的js文件中,代码中的css代码可以删掉,display设为none,是为了避免在页面未加载完,显示不正确的问题。
(function($) { 
$.fn.scrollBox = function(options){ 
var defaultOptions = { 
speed: 0.1, //加速 
time: 16, //移动速度 
top: 200, //默认顶部 
align: 'right', //浮动位置,可选左、右 
mix: 0 //边距 
}; 
var options = $.extend(defaultOptions, options); 
this.each(function(){ 
var obj = $(this); 
init(); 
function init(){ 
obj.css('display', 'block'); 
obj.css('position', 'absolute'); 
obj.css(options.align, options.mix); 
obj.css('top', options.top+'px'); 
obj.css('z-index', '99'); 
move(); 
} 
function back() { 
acceleration = options.speed; 
time = options.time; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x = Math.max(x1, x2); 
var y = Math.max(y1, y2); 
var speed = acceleration; 
return { 
l: x, 
t: y, 
s: speed 
}; 
}; function move(){ 
var tip = obj; 
var old = options.top; 
var pos = back().t; 
pos = pos - $(tip).Coordinate().y + options.top; 
pos = $(tip).Coordinate().y + pos / 10; 
if (pos < options.top) { 
pos = options.top; 
} 
if (pos != old) { 
tip.css('top',pos + "px"); 
} 
old = pos; 
window.setTimeout(function(){move();}, options.time); 
}; 
}); 
}; 
$.fn.Coordinate = function(){ 
var E = $(this)[0]; 
var C = E.offsetTop; 
var B = E.offsetLeft; 
var A = E.offsetWidth; 
var D = E.offsetHeight; 
while (E = E.offsetParent) { 
C += E.offsetTop; 
B += E.offsetLeft; 
} 
return { 
x: B, 
y: C, 
w: A, 
h: D 
}; 
}; 
})(jQuery);
Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
JavaScript模拟push
Mar 06 Javascript
JS之相等操作符详解
Sep 13 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 #Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 #Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 #Javascript
jquery 插件开发备注
Aug 27 #Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 #Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 #Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 #Javascript
You might like
PHP常用函数总结(180多个)
2016/12/25 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python对象与json相互转换的方法
2019/05/07 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
详解python 内存优化
2020/08/17 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
招商业务员岗位职责
2013/12/16 职场文书
迟到检讨书500字
2014/02/05 职场文书
洗车工岗位职责
2014/03/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
党校学习个人总结
2015/02/15 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
详解Python flask的前后端交互
2022/03/31 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js