>  기사  >  웹 프론트엔드  >  jQuery 위치 플러그인_jquery

jQuery 위치 플러그인_jquery

WBOY
WBOY원래의
2016-05-16 18:57:14982검색

플러그인 코드:
/*어떤 위치에도 고정된 부동 레이어*/
/*No Sword (http://regedit.cnblogs.com) 08-03-11*/
/*설명: 스크롤 막대가 스크롤되면 레이어가 웹 페이지의 임의 위치로 이동하도록 지정할 수 있습니다. */
/*2008-4-1 수정: 올바른 위치에서는 유효하지 않습니다. 여기에 판단을 추가하세요
값이 있으면 설정되지 않습니다. 값이 없으면 18px가 추가됩니다.
*/
/ * 호출:
1 매개변수 없음 호출 :오른쪽 하단에 기본 float
$("#id").floatdiv()
2 내장 고정 위치 float
//오른쪽 아래 Corner
$("#id").floatdiv(" rightbottom");
//왼쪽 하단
$("#id").floatdiv("leftbottom")
// 오른쪽 하단
$("#id").floatdiv(" rightbottom");
//왼쪽 상단
$("#id").floatdiv("lefttop")
//오른쪽 상단
$("#id").floatdiv(" righttop")
//가운데
$("#id").floatdiv("middle"); 3 사용자 정의 위치 부동
$("#id").floatdiv({ left:"10px",top:"10px"})
위 매개변수를 사용하여 왼쪽에서 10픽셀에 부동 레이어를 설정합니다. 위쪽에서 10픽셀
*/
jQuery.fn.floatdiv=function(location){
//ie6에서 세로 스크롤 막대를 숨기려고 합니다
var isIE6=false
if; ($.browser.msie && $.browser.version=="6.0"){
$ ("html").css("overflow-x","auto").css("overflow-y", "숨겨짐");
isIE6=true;
};
$(" body").css({margin:"0px",padding:"0 10px 0 10px",
경계: "0px",
높이:"100%",
overflow:"auto"
})
return this.each(function(){
var loc;//절대값 레이어 위치 지정
if(location==undefine || 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"}; 🎜>case("righttop")://오른쪽 상단
loc={right:"0px",top:" 0px"}
break
case("middle"):// center
var l=0;//left
var t=0;//top
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; .clientHeight;
}
l=windowWidth/2-$(this).width()/2
t= windowHeight/2-$(this).height()/2; loc={left:l "px",top:t "px"};
break;
default://default는 오른쪽 하단입니다
loc={right:"0px",bottom:" 0px"};
break;
}
}else{
loc=location;
}
$(this).css("z-index","9999") .css(loc).css("위치","고정");
if(isIE6){
if(loc.right !=undefine){
//2008-4-1 수정: 올바른 위치를 사용자 정의할 때 유효하지 않습니다.
//값이 있으면 설정되지 않습니다. 값이 없으면 수정된 레이어 위치가 18px가 추가됩니다
. (this).css("right")==null || $(this).css("right")==""){
$(this).css( "right","18px") ;
}
}
$(this).css("position","absolute")
}
})
사용법:






Anywhere 플로팅 윈도우 플러그인







오른쪽 상단
왼쪽 하단


/*모든 위치에 부동 고정 레이어*/

/*설명: 지정된 레이어를 웹 페이지의 임의 위치에 부동으로 만들 수 있으며 스크롤 막대가 스크롤될 때 현재 위치에 유지됩니다. , 깜박임 없음 */

/*호출:

1 매개변수 없는 호출: 기본적으로 오른쪽 하단에 부동

$("#id").floatdiv ( );


고정 위치 부동 소수점 2개 내장

//오른쪽 하단

$("#id").floatdiv("rightbottom ") ;

//왼쪽 하단

$("#id").floatdiv("leftbottom");

//오른쪽 하단

$( "#id").floatdiv("rightbottom");

//왼쪽 상단

$("#id").floatdiv("lefttop");

//오른쪽 상단

$("#id").floatdiv("righttop");

//가운데

$("# id").floatdiv( "middle");


3 사용자 정의 위치 float

$("#id").floatdiv({left:"10px", top:"10px" });

위 매개변수를 사용하여 플로팅 레이어를 왼쪽에서 10픽셀, 위쪽에서 10픽셀로 설정합니다.

*/



안녕하세요



































































안녕하세요


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.