基于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 Serializer序列化时间处理示例
Jul 31 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
js用类封装pop弹窗组件
Oct 08 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
js实现图片实时时钟
Jan 15 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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新建文件自动编号的思路与实现
2011/06/27 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
jQuery实现电梯导航模块
2020/12/22 jQuery
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Django 自动生成api接口文档教程
2019/11/19 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Python实现京东抢秒杀功能
2021/01/25 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
2014自荐信的写作技巧
2014/01/28 职场文书
早恋主题班会
2015/08/14 职场文书
《称赞》教学反思
2016/02/17 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python