jQuery簡單實現(xiàn)中間浮窗效果
本文實例講述了jQuery簡單實現(xiàn)中間浮窗效果。分享給大家供大家參考,具體如下:
basic.css:
/* * -- 樣式說明 -- * 最大優(yōu)先實現(xiàn)法,全局能實現(xiàn)不用區(qū)域,區(qū)域能實現(xiàn)不用模板,模板能實現(xiàn)不用界面,界面能實現(xiàn)不用標(biāo)簽 * g - 全局 * t - 區(qū)域 * m - 模板 * ui - 界面 * lb - 標(biāo)簽 * j - 腳本 只使用在有JS操作的樣式 */ /*公共樣式*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;} body{ font-family:Helvetica,Tahoma,Arial,sans-serif; color:#333; font-size:16px; background-color:#fff;} input, select, textarea{ font-family:Helvetica,Tahoma,Arial,sans-serif; background:#fff; margin:0; padding:0; outline:none;} textarea{ resize:none;} img{ border:none;} i, em{ font-style:normal;} ul li{ list-style-type:none;} a{ color:#06f; text-decoration:none;} a:hover{ color:#06f; text-decoration:underline;} /*全局樣式*/ .g-fl{ float:left;} .g-fr{ float:right;} .g-c{ clear:both;}
index.html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>中間浮窗</title> <link href="css/basic.css" rel="stylesheet"> <script src="js/jquery-1.10.1.min.js"></script> </head> <body> <div style="height:10000px;"></div> <style type="text/css"> /*建議先隱藏浮窗的樣式 display:none*/ .j-fixcenter{ height:120px; width:219px; background:#f60; display:none; position:fixed; } </style> <div id="fixCenter" class="j-fixcenter"> <img src="img/fixCenter.jpg" width="219" height="120" usemap="#fixCenterMap"> <!--繪制地圖,把圖片哪個位置要點擊的繪制出來--> <map name="fixCenterMap" id="fixCenterMap"> <area shape="rect" coords="175,0,219,30" href="javascript:void();" id="closeFixCenter" /> <area shape="rect" coords="0,30,219,94" href ="###2" /> <area shape="rect" coords="0,94,219,120" href ="###3" /> </map> </div> <script type="text/javascript"> $(function(){ //調(diào)用浮窗方法 fixCenter(); }); //當(dāng)調(diào)整瀏覽器窗口的大小時,發(fā)生 resize 事件 $(window).resize(function(){ //重置浮窗定位 fixCenterGetPosition(); }); function fixCenter(){ //獲取浮窗定位 fixCenterGetPosition(); //獲取在浮窗的元素ID var fid = $("#fixCenter"); //漸變顯示元素 fid.fadeIn(600); //關(guān)閉按鈕的點擊事件 $("#closeFixCenter").click(function(){ //漸變隱藏元素,三秒后重新顯示 fid.fadeOut(600).delay(3000).fadeIn(600); }); } function fixCenterGetPosition(){ var fid = $("#fixCenter"); //獲取當(dāng)前窗口的高度 var h = $(window).height(); //獲取當(dāng)前窗口的寬度 var w = $(window).width(); //計算要定位左側(cè)距離 var left = (w/2) - parseInt(fid.css("width")) / 2; //計算要定位上側(cè)距離 var top = (h/2) - parseInt(fid.css("height")) / 2; //設(shè)置定位距離的樣式 fid.css({"left":(left) + "px", "top": (top) + "px" }); } </script> </body> </html>
效果圖:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果
這篇文章主要介紹了基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果,需要的朋友可以參考下2015-12-12jQuery實現(xiàn)標(biāo)簽子元素的添加和賦值方法
下面小編就為大家分享一篇jQuery實現(xiàn)標(biāo)簽子元素的添加和賦值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實例形式對比分析了jQuery圖標(biāo)插件echarts針對垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法
這篇文章主要介紹了jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04jquery查找父元素、子元素(個人經(jīng)驗總結(jié))
對使用js或者jquery查找父元素、子元素比較混淆的朋友可以參考下本文,因為是個人總結(jié),用起來會比較方便2014-04-04