效果
①基本效果:show()、hide()、toggle()
②滑动 slideDown()、slideUp()、slideToggle()
划上:$("p").slideUp("slow");
划下:$("p").slideDown("slow");
$("p").slideToggle("slow");
用600毫秒缓慢的将段落滑上或滑下
③淡入淡出 fadeIn()、fadeOut()
$("p").fadeIn("slow");//先隐藏掉
$("p").fadeOut("slow");//在显示出来
④透明度 fadeTo()、
$("p").fadeTo("slow",0.66); //先隐藏掉
$("p").fadeTo("slow",0.22);//在显示出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口效果</title> <style type="text/css"> .window{ 250px; background-color:#d0def0; padding:2px; margin:5px; position:absolute; display:none; } .content{ height:150px; background-color:#FFF; padding:2px; font-size:14px; overflow:auto; } .title{ padding:2px; color:#666; font-size:14px;} .title img{ float:right; cursor:pointer;} </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> //使用jquery加载事件 $(document).ready(function (){ //定一些变量 //获得窗口的高度 var windowHeight=$(window).height(); //获得窗口的高度 var windowWidth=$(window).width(); //获得弹窗的高度 var popHeight=$(".window").height(); //获得弹窗的宽度 var popWidth=$(".window").width(); // function closeWindow(){ //找到X号图片，加单击事件，并且关闭窗口 $(".title img").click(function (){ $(this).parent().parent().hide("slow"); }); //} //关闭窗口 //closeWindow(); //获取延迟时间 var timeoutCenter; //定义弹出居中窗口的方法 function popCenterWindow(){ //获取滚动条滚动的高度 var scrollTop=$(window).scrollTop(); //获取滚动条滚动的宽度 var scrollLeft=$(window).scrollLeft(); clearTimeout(timeoutCenter); timeoutCenter=setTimeout(function(){ var popY=(windowHeight-popHeight)/2+scrollTop; var popX=(windowWidth-popWidth)/2+scrollLeft; //设定窗口的位置 //$("#center").css("top",popY).css("left",popX).show("slow"); $("#center").animate({left:popX,top:popY},300).show("slow"); },300); } $("#btn_center").click(function (){ popCenterWindow(); //滚动是调用 $(window).scroll(function (){ popCenterWindow(); }); }); //获取延迟时间 var timeoutLeft; //定义左下角的窗口效果 function popLeftButtomWindow(){ //获取延迟时间 //获取滚动条滚动的高度 var scrollTop=$(window).scrollTop(); //获取滚动条滚动的宽度 var scrollLeft=$(window).scrollLeft(); clearTimeout(timeoutLeft); timeoutLeft=setTimeout(function(){ //计算弹出窗口的左上角Y的偏移量 var popY=windowHeight-popHeight+scrollTop-10; var popX=scrollLeft-10; //设定窗口的位置 //$("#left").css("top",popY).css("left",popX).show("slow"); $("#left").animate({left:popX,top:popY},300).show("slow"); },300); } //单击左下按钮出现 $("#btn_left").click(function (){ //滚动是调用 $(window).scroll(function (){ popLeftButtomWindow(); }); popLeftButtomWindow(); }); //获取延迟时间 var timeoutRight; //定义右下角的窗口效果 function popRightButtomWindow(){ //获取滚动条滚动的高度 var scrollTop=$(window).scrollTop(); //获取滚动条滚动的宽度 var scrollLeft=$(window).scrollLeft(); clearTimeout(timeoutRight); timeoutRight=setTimeout(function(){ //计算弹出窗口的左上角Y的偏移量 var popY=windowHeight-popHeight+scrollTop-10; var popX=windowWidth-popWidth+scrollLeft-10; //设定窗口的位置 //$("#right").css("top",popY).css("left",popX).show("slow"); $("#right").animate({left:popX,top:popY},300).show("slow"); },300); } //单击时出现 $("#btn_right").click(function (){ $(window).scroll(function (){ popRightButtomWindow(); }); popRightButtomWindow(); }); }); </script> </head> <body> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <input type="button" id="btn_center" value="弹出居中窗口"> <input type="button" id="btn_left" value="弹出左下角窗口"> <input type="button" id="btn_right" value="弹出右下角窗口"> <div id="center" class="window"> <div class="title"><img src="close.jpg">CSDN欢迎您!-居中窗口</div> <div class="content">3gput.com,都来吧</div> </div> <div id="left" class="window"> <div class="title"><img src="close.jpg">CSDN欢迎您!-居左窗口</div> <div class="content">3gput.com,都来吧</div> </div> <div id="right" class="window"> <div class="title"><img src="close.jpg">CSDN欢迎您!-居右窗口</div> <div class="content">3gput.com,都来吧</div> </div> </body> </html>