jQuery簡(jiǎn)單實(shí)現(xiàn)中間浮窗效果
本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)中間浮窗效果。分享給大家供大家參考,具體如下:
basic.css:
/* * -- 樣式說(shuō)明 -- * 最大優(yōu)先實(shí)現(xiàn)法,全局能實(shí)現(xiàn)不用區(qū)域,區(qū)域能實(shí)現(xiàn)不用模板,模板能實(shí)現(xiàn)不用界面,界面能實(shí)現(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"> <!--繪制地圖,把圖片哪個(gè)位置要點(diǎn)擊的繪制出來(lái)--> <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)整瀏覽器窗口的大小時(shí),發(fā)生 resize 事件 $(window).resize(function(){ //重置浮窗定位 fixCenterGetPosition(); }); function fixCenter(){ //獲取浮窗定位 fixCenterGetPosition(); //獲取在浮窗的元素ID var fid = $("#fixCenter"); //漸變顯示元素 fid.fadeIn(600); //關(guān)閉按鈕的點(diǎ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(); //計(jì)算要定位左側(cè)距離 var left = (w/2) - parseInt(fid.css("width")) / 2; //計(jì)算要定位上側(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擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
- jQuery實(shí)現(xiàn)彈出窗口中切換登錄與注冊(cè)表單
- jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動(dòng)切換)
- jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
- jQuery新窗口打開(kāi)外鏈接
- jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
- jquery div模態(tài)窗口的簡(jiǎn)單實(shí)例
- jQuery使用模式窗口實(shí)現(xiàn)在主頁(yè)面和子頁(yè)面中互相傳值的方法
- jQuery Mobile彈出窗、彈出層知識(shí)匯總
- jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法
相關(guān)文章
基于jquery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果,需要的朋友可以參考下2015-12-12jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法
這篇文章主要介紹了jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法,對(duì)比分析了bind與live方法,說(shuō)明了live方法在處理新增元素時(shí)的作用,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法
下面小編就為大家分享一篇jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實(shí)例形式對(duì)比分析了jQuery圖標(biāo)插件echarts針對(duì)垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03基于jQuery實(shí)現(xiàn)網(wǎng)頁(yè)打印功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)網(wǎng)頁(yè)打印功能,實(shí)現(xiàn)的打印功能大致跟瀏覽器的Ctrl+P效果一樣,感興趣的小伙伴們可以參考一下2015-12-12jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04jquery查找父元素、子元素(個(gè)人經(jīng)驗(yàn)總結(jié))
對(duì)使用js或者jquery查找父元素、子元素比較混淆的朋友可以參考下本文,因?yàn)槭莻€(gè)人總結(jié),用起來(lái)會(huì)比較方便2014-04-04