jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊彈出漸變層的方法
彈出層在實(shí)際應(yīng)用中我們經(jīng)常會(huì)碰到大量的彈出層效果,下面我來(lái)做一個(gè)基于jquery的簡(jiǎn)單的彈出層效果實(shí)例,各位朋友有興趣可參考。
效果代碼如下
在彈出層中下面是核心代碼
<script type="text/javascript"> // 漸變彈出層 $(document).ready(function(){ var speed = 600;//動(dòng)畫(huà)速度 $("#race a").click(function(event){//綁定事件處理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//設(shè)置彈出層位置 $("#racePop").show(speed);//動(dòng)畫(huà)顯示 }); $(document).click(function(event) { $("#racePop").hide(speed) });//單擊空白區(qū)域隱藏 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//單擊彈出層則自身隱藏 }); </script>
完整實(shí)例
<!-- 漸變彈出層 --> <div id="race"><a href="#">點(diǎn)擊</a></div> <div id="racePop" class="raceShow">這里是彈出層效果</div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // 漸變彈出層 $(document).ready(function(){ var speed = 600;//動(dòng)畫(huà)速度 $("#race a").click(function(event){//綁定事件處理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//設(shè)置彈出層位置 $("#racePop").show(speed);//動(dòng)畫(huà)顯示 }); $(document).click(function(event) { $("#racePop").hide(speed) });//單擊空白區(qū)域隱藏 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//單擊彈出層則自身隱藏 }); </script> <style> body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff} body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} /* 漸變彈出層 */ #race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;margin:10px auto} .raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;} </style>
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過(guò)彈出提示層信息的簡(jiǎn)單實(shí)例
- 使用jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層附源碼下載
- jQuery Dialog 彈出層對(duì)話框插件
- 基于jquery的模態(tài)div層彈出效果
- jquery實(shí)現(xiàn)居中彈出層代碼
- jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口
- jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
- JQuery彈出層示例可自定義
- jQuery實(shí)現(xiàn)鼠標(biāo)移到某個(gè)對(duì)象時(shí)彈出顯示層功能
相關(guān)文章
基于JQuery和CSS3實(shí)現(xiàn)仿Apple TV海報(bào)背景視覺(jué)差特效源碼分享
這是一款效果非常炫酷的jQuery和CSS3仿Apple TV海報(bào)背景視覺(jué)差特效。該視覺(jué)差特效在使用鼠標(biāo)在屏幕上下左右移動(dòng)的時(shí)候,海報(bào)中的各種元素以不同的速度運(yùn)動(dòng),形成視覺(jué)差效果,并且還帶有一些流光特效。2015-09-09jquery實(shí)現(xiàn)網(wǎng)頁(yè)查找功能示例分享
當(dāng)需要在頁(yè)面中查找某個(gè)關(guān)鍵字時(shí),一是可以通過(guò)瀏覽器的查找功能實(shí)現(xiàn),二是可以通過(guò)前端腳本準(zhǔn)確查找定位,本文介紹通過(guò)jQuery實(shí)現(xiàn)的頁(yè)面內(nèi)容查找定位的功能,并可擴(kuò)展顯示查找后的相關(guān)信息2014-02-02jQuery實(shí)現(xiàn)的右下角廣告窗體跟隨效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的右下角廣告窗體跟隨效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09jquery中cookie用法實(shí)例詳解(獲取,存儲(chǔ),刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實(shí)例詳細(xì)分析了jQuery操作cookie的獲取,存儲(chǔ),刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過(guò)信息實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01jQuery學(xué)習(xí)2 選擇器的使用說(shuō)明
利用選擇器,選擇要被操作的html中的元素。2010-02-02jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易
眾所周知,Jquery以其簡(jiǎn)潔性讓無(wú)數(shù)人為之瘋狂?,F(xiàn)在我要像大家介紹一個(gè)jQuery Validation,一看到Validation大家肯定第一直觀感覺(jué)就是這肯定是一個(gè)驗(yàn)證框架,沒(méi)有錯(cuò),本文就是基于jQuery Validation展開(kāi)討論。2010-10-10JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
在ajax中經(jīng)常需要對(duì)元素的位置進(jìn)行精確的定位,此時(shí)不僅需要獲取元素自身的大小位置等屬性。還需要知道頁(yè)面、瀏覽器、滾動(dòng)條等的長(zhǎng)度和寬度。2010-01-01autoPlay 基于jquery的圖片自動(dòng)播放效果
效果類(lèi)似這種,自動(dòng)播放,實(shí)質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。2011-12-12