jquery任意位置浮動(dòng)固定層插件用法實(shí)例
本文實(shí)例講述了jquery任意位置浮動(dòng)固定層插件用法。分享給大家供大家參考。具體分析如下:
說(shuō)明:可以讓指定的層浮動(dòng)到網(wǎng)頁(yè)上的任何位置,當(dāng)滾動(dòng)條滾動(dòng)時(shí)它會(huì)保持在當(dāng)前位置不變,不會(huì)產(chǎn)生閃動(dòng)
2009-06-10修改:重新修改插件實(shí)現(xiàn)固定浮動(dòng)層的方式,使用一個(gè)大固定層來(lái)定位
2009-07-16修改:修正IE6下無(wú)法固定在top上的問(wèn)題
09-11-5修改:當(dāng)自定義層的絕對(duì)位置時(shí),加上top為空值時(shí)的判斷
這次的方法偷自天涯新版頁(yè)
經(jīng)多次測(cè)試,基本上沒(méi)bug~
調(diào)用:
1 無(wú)參數(shù)調(diào)用:默認(rèn)浮動(dòng)在右下角
$("#id").floatdiv();
2 內(nèi)置固定位置浮動(dòng)
//右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id").floatdiv("leftbottom"); //右下角 $("#id").floatdiv("rightbottom"); //左上角 $("#id").floatdiv("lefttop"); //右上角 $("#id").floatdiv("righttop"); //居中 $("#id").floatdiv("middle");
另外新添加了四個(gè)新的固定位置方法
middletop(居中置頂)、middlebottom(居中置低)、leftmiddle、rightmiddle
3 自定義位置浮動(dòng)
$("#id").floatdiv({left:"10px",top:"10px"});
以上參數(shù),設(shè)置浮動(dòng)層在left 10個(gè)像素,top 10個(gè)像素的位置
jQuery.fn.floatdiv=function(location){ //判斷瀏覽器版本 var isIE6=false; var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0; if(Sys.ie && Sys.ie=="6.0"){ isIE6=true; } var windowWidth,windowHeight;//窗口的高和寬 //取得窗口的高和寬 if (self.innerHeight) { windowWidth=self.innerWidth; windowHeight=self.innerHeight; }else if (document.documentElement&&document.documentElement.clientHeight) { windowWidth=document.documentElement.clientWidth; windowHeight=document.documentElement.clientHeight; } else if (document.body) { windowWidth=document.body.clientWidth; windowHeight=document.body.clientHeight; } return this.each(function(){ var loc;//層的絕對(duì)定位位置 var wrap=$("<div></div>"); var top=-1; if(location==undefined || location.constructor == String){ switch(location){ case("rightbottom")://右下角 loc={right:"0px",bottom:"0px"}; break; case("leftbottom")://左下角 loc={left:"0px",bottom:"0px"}; break; case("lefttop")://左上角 loc={left:"0px",top:"0px"}; top=0; break; case("righttop")://右上角 loc={right:"0px",top:"0px"}; top=0; break; case("middletop")://居中置頂 loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"}; top=0; break; case("middlebottom")://居中置低 loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"}; break; case("leftmiddle")://左邊居中 loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"}; top=windowHeight/2-$(this).height()/2; break; case("rightmiddle")://右邊居中 loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"}; top=windowHeight/2-$(this).height()/2; break; case("middle")://居中 var l=0;//居左 var t=0;//居上 l=windowWidth/2-$(this).width()/2; t=windowHeight/2-$(this).height()/2; top=t; loc={left:l+"px",top:t+"px"}; break; default://默認(rèn)為右下角 location="rightbottom"; loc={right:"0px",bottom:"0px"}; break; } }else{ loc=location; alert(loc.bottom); var str=loc.top; //09-11-5修改:加上top為空值時(shí)的判斷 if (typeof(str)!= 'undefined'){ str=str.replace("px",""); top=str; } } /*fied ie6 css hack*/ if(isIE6){ if (top>=0) { wrap=$("<div style=\"top:expression(documentElement.scrollTop+"+top+");\"></div>"); }else{ wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>"); } } $("body").append(wrap); wrap.css(loc).css({position:"fixed",z_index:"999"}); if (isIE6) { wrap.css("position","absolute"); //沒(méi)有加這個(gè)的話,ie6使用表達(dá)式時(shí)就會(huì)發(fā)現(xiàn)跳動(dòng)現(xiàn)象 //至于為什么要加這個(gè),還有為什么要加nothing.txt這個(gè),偶也不知道,希望知道的同學(xué)可以告訴我 $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)"); } //將要固定的層添加到固定層里 $(this).appendTo(wrap); }); };
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果
- 博客側(cè)邊欄模塊跟隨滾動(dòng)條滑動(dòng)固定效果的實(shí)現(xiàn)方法(js+jquery等)
- jQuery實(shí)現(xiàn)固定在網(wǎng)頁(yè)頂部的菜單效果代碼
- jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
- jQuery固定元素插件scrolltofixed使用指南
- jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果仿蘑菇街
- jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jquery實(shí)現(xiàn)的導(dǎo)航固定效果
- Jquery實(shí)現(xiàn)側(cè)邊欄跟隨滾動(dòng)條固定(兼容IE6)
- jQuery實(shí)現(xiàn)滑動(dòng)頁(yè)面固定頂部顯示(可根據(jù)顯示位置消失與替換)
相關(guān)文章
基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片輪播效果,利用Jquery制作焦點(diǎn)圖左右輪播特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲
本文主要介紹了jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲的思路分析與代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery validate 驗(yàn)證radio實(shí)例
這篇文章主要介紹了jQuery validate 驗(yàn)證radio實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)使用sort方法對(duì)json數(shù)據(jù)排序的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)使用sort方法對(duì)json數(shù)據(jù)排序的方法,涉及jQuery基于ajax針對(duì)json格式文件數(shù)據(jù)的動(dòng)態(tài)載入與排序相關(guān)操作技巧,需要的朋友可以參考下2018-04-04基于Jquery 解決Ajax請(qǐng)求的頁(yè)面 瀏覽器后退前進(jìn)功能,頁(yè)面刷新功能實(shí)效問(wèn)題
做了幾個(gè)兼職,上天幫人完成頁(yè)面的時(shí)候順便做了一個(gè)ajax的請(qǐng)求。發(fā)現(xiàn)瀏覽器的刷新,后退,前進(jìn)按鈕失效。于是乎google了一下。2010-12-12jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果
鼠標(biāo)經(jīng)過(guò)時(shí)圖片產(chǎn)生塌陷,實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-11-11