这些天一直在做弹出层的设计,原理在明白之后很好下手!主要技术要点就是:
1.弹出层的绝对定位,这主要有跨浏览器鼠标位置的获取技术,CSS:z-index定位。
2.动态控制弹出Div的各种属性。
3.弹出窗口位置的计算,主要是在有蒙版层的里面,居中的问题。
4.各种弹出效果和动画。
先给出普通弹出层的代码:
1
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
2 $( function (){
3 $( " #ele1 " ).click( function (ev){
4 var evs = ev || window.event;
5 var XYposition = mousePosition(evs);
6 var X = XYposition.x;
7 var Y = XYposition.y;
8 $( ' #blk1 ' ).css( " opacity " , " 0 " ).css( " left " , '' + X + ' px ' ).css( " top " , '' + Y + ' px ' );
9 $( ' #blk1 ' ).animate({width: " 200px " ,height: " 200px " ,opacity: " 1 " }, 3000 );
10 })
11 $( " #close1 " ).click( function (){
12 $( ' #blk1 ' ).stop().animate({width: " 0px " ,height: " 0px " ,opacity: " 0 " ,left: " 0px " ,top: " 0px " }, 300 );
13 })
14
15 });
16
17 // 鼠标位置
18 function mousePosition(ev){
19 if (ev.pageX || ev.pageY){
20 return {x:ev.pageX, y:ev.pageY};
21 }
22 return {
23 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
24 y:ev.clientY + document.body.scrollTop - document.body.clientTop
25 };
26 }
27
28 < / script>
2 $( function (){
3 $( " #ele1 " ).click( function (ev){
4 var evs = ev || window.event;
5 var XYposition = mousePosition(evs);
6 var X = XYposition.x;
7 var Y = XYposition.y;
8 $( ' #blk1 ' ).css( " opacity " , " 0 " ).css( " left " , '' + X + ' px ' ).css( " top " , '' + Y + ' px ' );
9 $( ' #blk1 ' ).animate({width: " 200px " ,height: " 200px " ,opacity: " 1 " }, 3000 );
10 })
11 $( " #close1 " ).click( function (){
12 $( ' #blk1 ' ).stop().animate({width: " 0px " ,height: " 0px " ,opacity: " 0 " ,left: " 0px " ,top: " 0px " }, 300 );
13 })
14
15 });
16
17 // 鼠标位置
18 function mousePosition(ev){
19 if (ev.pageX || ev.pageY){
20 return {x:ev.pageX, y:ev.pageY};
21 }
22 return {
23 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
24 y:ev.clientY + document.body.scrollTop - document.body.clientTop
25 };
26 }
27
28 < / script>
带蒙版:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
$( function (){
$( " #ele1 " ).click( function (ev){
// 蒙版层
var CoverAll = getViewportInfo();
var W = CoverAll.w;
var H = CoverAll.h;
$( ' #all ' ).css( " opacity " , " 0.3 " ).css( " width " , '' + W + ' px ' ).css( " height " , '' + H + ' px ' );
// 弹出层
var X = (W - 300 ) / 2;
var Y = (H - 200 ) / 2;
$( ' #blk1 ' ).css( " opacity " , " 0 " ).css( " left " , '' + W / 2+'').css("top",''+H / 2 + '' );
$( ' #blk1 ' ).animate({width: " 300px " ,height: " 200px " ,left: '' + X + '' ,top: '' + Y + '' ,opacity: " 1 " }, 3000 , function (){$( ' #hideDiv ' ).show();});
})
// 关闭按钮
$( ' #close1 ' ).click( function (){
$( ' #blk1 ' ).stop().animate({width: " 0px " ,height: " 0px " ,opacity: " 0 " }, 300 );
$( ' #all ' ).stop().animate({width: " 0px " ,height: " 0px " ,opacity: " 0 " ,left: " 0px " ,top: " 0px " }, 100 );
})
});
// 蒙版的尺寸
function getViewportInfo()
{
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
return {w:w,h:h};
};
< / script>
$( function (){
$( " #ele1 " ).click( function (ev){
// 蒙版层
var CoverAll = getViewportInfo();
var W = CoverAll.w;
var H = CoverAll.h;
$( ' #all ' ).css( " opacity " , " 0.3 " ).css( " width " , '' + W + ' px ' ).css( " height " , '' + H + ' px ' );
// 弹出层
var X = (W - 300 ) / 2;
var Y = (H - 200 ) / 2;
$( ' #blk1 ' ).css( " opacity " , " 0 " ).css( " left " , '' + W / 2+'').css("top",''+H / 2 + '' );
$( ' #blk1 ' ).animate({width: " 300px " ,height: " 200px " ,left: '' + X + '' ,top: '' + Y + '' ,opacity: " 1 " }, 3000 , function (){$( ' #hideDiv ' ).show();});
})
// 关闭按钮
$( ' #close1 ' ).click( function (){
$( ' #blk1 ' ).stop().animate({width: " 0px " ,height: " 0px " ,opacity: " 0 " }, 300 );
$( ' #all ' ).stop().animate({width: " 0px " ,height: " 0px " ,opacity: " 0 " ,left: " 0px " ,top: " 0px " }, 100 );
})
});
// 蒙版的尺寸
function getViewportInfo()
{
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
return {w:w,h:h};
};
< / script>
具体就不解释了,注释很充分,大家可以自己运行一下!