jquery div 定位焦点

*fix:要定位的元素
*rel:相对定位的元素
*options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中);
*/

(function(win,$){
win.rposition=function(fix,rel,options){
var rectleft,recttop,recth=fix.outerheight(),rectw=fix.outerwidth(),wh=$(window).height(),ww=$(window).width(),
st=$(document).scrolltop(),sl=$(document).scrollleft(),
defaults={
align:"left",
vlign:"top",
xleft:0,
xtop:0,
adjust:true,
rwindow:false
},
options = $.extend(defaults, options);
var rectrel={
l:$(rel).offset().left,
t:$(rel).offset().top,
w:$(rel).outerwidth(),
h:$(rel).outerheight()
};
switch(options.align){
case "left":
rectleft=rectrel.l;break;
case "right":
rectleft=rectrel.l+rectrel.w;break;
case "center":
rectleft=rectrel.l+rectrel.w/2;break;
case "rleft":
rectleft=rectrel.l-rectw;break;
default:
rectleft=rectrel.l;
};
switch(options.vlign){
case "top":
recttop=rectrel.t;break;
case "center":
recttop=rectrel.t+rectrel.h/2;break;
case "vbottom":
recttop=rectrel.t-recth; break;
case "bottom":
default:
recttop=rectrel.t+rectrel.h;
};
if(options.rwindow){
if(options.align=="center")rectleft=(ww-rectw)/2+sl;
if(options.vlign=="center")recttop=(wh-recth)/2+st;
};
if(options.adjust){
if(rectleft+rectw>ww+sl){rectleft-=(rectleft+rectw)-(ww+sl)}
if(recttop+recth>wh+st){recttop=rectrel.t-recth;}
};
$(fix).css教程({"left":rectleft+options.xleft,"top":recttop+options.xtop});
}
})(window,jquery)

时间: 2024-09-07 17:48:14

jquery div 定位焦点的相关文章

jQuery右侧选项卡焦点图片轮播特效代码分享_jquery

本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.  为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-

基于jQuery全屏焦点图左右切换插件responsiveslides_jquery

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览    源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,

jQuery满屏焦点图左右滚动特效代码分享_jquery

本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: jQuery焦点图是一款满屏左右滚动,带左右按钮,带缩略图,支持自动轮播的焦点图代码. 运行效果图:        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery满屏焦点图左右滚动特效代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jQuery横向擦除焦点图特效代码分享_jquery

本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: 迅雷jQuery横向擦除焦点图是一款基于jQuery实现的7屏横向擦除焦点图代码,有缩略图和标题,可以自定义标题. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc

jQuery实现定位滚动条位置_jquery

jQuery实现滚动条滚动到子元素位置(方便定位) 关键代码如下所示: <div class="of-y" id="nurse" > <table class="high width" id="nurse-plan"> <tr id="tr-one"></tr> <tr id="tr-two"></tr> <t

jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)_jquery

这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示     源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="1" title="

html中div定位练习

html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定,$http请求等等,记录备忘: login.css中代码: /* 主页面数据列表 */ .planWrite{ background-color: #868383; margin: 9px; font-size: 16px; width: 93%; height:330px; } .plDiv{ w

div失去焦点事件实现思路_javascript技巧

看本文得先了解以下几个事件(摘自w3c). blur事件: 当元素失去焦点时发生 blur 事件. focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件). tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序. 我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了. 真实项目代码: 复制代码 代码如下:

jquery div 赋值

其实jquery div 赋值是非常简单的事情,下面我们就来看看关于jquery div 赋值几种方法吧. $("#id").html()="";  //或者 $("#id").html("test"); $("#id").html("test"); $.get('htef',function(data){   $("#id").html(data); }) id是你