基于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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
js控制div弹出层实现方法
May 11 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Node 自动化部署的方法
Oct 17 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 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相当简单的分页类
2008/10/02 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python使用多进程的实例详解
2018/09/19 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
中职生自荐信
2013/10/13 职场文书
单位介绍信范文
2014/01/18 职场文书
yy婚礼主持词
2014/03/14 职场文书
党员一句话承诺大全
2014/03/28 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
繁星春水读书笔记
2015/06/30 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
python中%格式表达式实例用法
2021/06/18 Python
python实现双链表
2022/05/25 Python