基于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 相关文章推荐
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
js中Object.create实例用法详解
Oct 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下载远程文件类(支持断点续传)
2008/11/14 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python登录注册验证功能实现
2018/06/18 Python
python excel和yaml文件的读取封装
2021/01/12 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
翻译专业应届生求职信
2013/11/23 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
酒店总经理助理职责
2014/02/12 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
给学校建议书范文
2014/05/13 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
舞出我人生观后感
2015/06/16 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
公司周年庆寄语
2019/06/21 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL