모든 해상도_javascript 기술에서 중앙 표시를 실현하는 Js 제어 팝업 창

贴代码

复system代码 代码如下:

<머리>





<스크립트 언어="javascript">
$(문서).ready(함수 (){
$("#btn_center").click(함수 (){
$(window).scroll(함수 (){
popcenterWindow( );
});
});
$("#btn_right").click(function (){
$(window).scroll(function (){
poprightWindow( );
});
});
$("#btn_left").click(function (){
$(window).scroll(function (){
popleftWindow( );
});
});


<본문>


















;




















;

csdn欢迎您

哈哈哈哈哈哈哈

csdn欢迎您

哈哈哈哈哈哈哈

csdn欢迎您

哈哈哈哈哈哈哈

JS

复主代码 代码如下:

//창 높이
var windowHeight;//창 너비
var windowWidth
//팝업 창 높이
var popHeight ;
/ /팝업 창 너비
var popWidth
//스크롤 막대 스크롤 높이
var scrollTop
//스크롤 막대 스크롤 너비
var scrollleft;//지연 시간
var timeout;
function init(){
//창 높이 가져오기
windowHeight=$(window).height( );
//창 너비 가져오기
windowWidth=$(window).width()
//팝업 창 높이 가져오기
popHeight=$(". window").height();
//팝업 창 너비 가져오기
popWidht=$(".window").width();
//스크롤 높이 가져오기 bar
scrollTop=$(window).scrollTop();
//스크롤 막대 너비 가져오기
scrollleft=$(window).scrollLeft()
}
// 창 닫기 정의
function closeWindow(){
$(".title img").click(function ( ){
$(this).parent().parent().hide("slow" );

});

}
//팝업 창 메서드 정의
function popcenterWindow(){
//마지막 지연을 먼저 지웁니다
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=(windowHeight-popHeight)/2 scrollTop;
var popX=(windowWidth-popWidht) /2 스크롤왼쪽;
$("#center").animate({top:popY,left:popX},300 ).show("slow");},300); 🎜>}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function ( ){
init();
var popY=windowHeight scrollTop-popHeight-10;
var popX=scrollleft-5;
$("#left").animate({top:popY, left:popX},300).show("slow");},300); >closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight -popHeight scrollTop-10;
var popX=windowWidth-popWidht scrollleft-10;
$("#right" ).animate({top:popY,left:popX},300).show("slow" );},300);
closeWindow();
}


CSS

코드 복사

코드는 다음과 같습니다. .window{ width:250px background-color: #3FF;

여백: 5px;

디스플레이: 없음
. 내용{
높이: 150px; >배경 색상:#FFF;
여백:2px;
글꼴 크기:14px;
overflow:auto;
}

여백:2px ;
색상:#999;
글꼴 크기:14px;
.title img{
float:right;
}< 스팬>