jquery效果 窗口弹出案例
生活随笔
收集整理的這篇文章主要介紹了
jquery效果 窗口弹出案例
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
?
效果
①基本效果:show()、hide()、toggle()
②滑動(dòng) 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{width: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號(hào)圖片，加單擊事件，并且關(guān)閉窗口$(".title img").click(function (){$(this).parent().parent().hide("slow");}); //}//關(guān)閉窗口//closeWindow();//獲取延遲時(shí)間var timeoutCenter; //定義彈出居中窗口的方法function popCenterWindow(){//獲取滾動(dòng)條滾動(dòng)的高度 var scrollTop=$(window).scrollTop();//獲取滾動(dòng)條滾動(dòng)的寬度var scrollLeft=$(window).scrollLeft(); clearTimeout(timeoutCenter);timeoutCenter=setTimeout(function(){var popY=(windowHeight-popHeight)/2+scrollTop;var popX=(windowWidth-popWidth)/2+scrollLeft;//設(shè)定窗口的位置//$("#center").css("top",popY).css("left",popX).show("slow");$("#center").animate({left:popX,top:popY},300).show("slow");},300);} $("#btn_center").click(function (){popCenterWindow();//滾動(dòng)是調(diào)用$(window).scroll(function (){popCenterWindow();});}); //獲取延遲時(shí)間var timeoutLeft; //定義左下角的窗口效果function popLeftButtomWindow(){//獲取延遲時(shí)間//獲取滾動(dòng)條滾動(dòng)的高度 var scrollTop=$(window).scrollTop();//獲取滾動(dòng)條滾動(dòng)的寬度var scrollLeft=$(window).scrollLeft(); clearTimeout(timeoutLeft);timeoutLeft=setTimeout(function(){//計(jì)算彈出窗口的左上角Y的偏移量var popY=windowHeight-popHeight+scrollTop-10;var popX=scrollLeft-10;//設(shè)定窗口的位置//$("#left").css("top",popY).css("left",popX).show("slow");$("#left").animate({left:popX,top:popY},300).show("slow");},300);} //單擊左下按鈕出現(xiàn) $("#btn_left").click(function (){ //滾動(dòng)是調(diào)用$(window).scroll(function (){popLeftButtomWindow();});popLeftButtomWindow();}); //獲取延遲時(shí)間var timeoutRight;//定義右下角的窗口效果function popRightButtomWindow(){//獲取滾動(dòng)條滾動(dòng)的高度 var scrollTop=$(window).scrollTop();//獲取滾動(dòng)條滾動(dòng)的寬度var scrollLeft=$(window).scrollLeft(); clearTimeout(timeoutRight);timeoutRight=setTimeout(function(){//計(jì)算彈出窗口的左上角Y的偏移量var popY=windowHeight-popHeight+scrollTop-10;var popX=windowWidth-popWidth+scrollLeft-10;//設(shè)定窗口的位置//$("#right").css("top",popY).css("left",popX).show("slow");$("#right").animate({left:popX,top:popY},300).show("slow");},300);} //單擊時(shí)出現(xiàn) $("#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>?
總結(jié)
以上是生活随笔為你收集整理的jquery效果 窗口弹出案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 修改LDAP查询默认1000条限制
- 下一篇： 最高科技——疯狂的前缀和