jquery實現(xiàn)點擊彈出層效果的簡單實例
彈出層在實際應用中我們經(jīng)常會碰到大量的彈出層效果，下面我來做一個基于jquery的簡單的彈出層效果實例，各位朋友有興趣可參考。
效果代碼如下：
在 彈出層 中下面是核心代碼
<script type="text/javascript">
// 漸變彈出層
$(document).ready(function(){
var speed = 600;//動畫速度
$("#race a").click(function(event){//綁定事件處理
event.stopPropagation();
var offset = $(event.target).offset();//取消事件冒泡
$("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//設置彈出層位置
$("#racePop").show(speed);//動畫顯示
});
$(document).click(function(event) { $("#racePop").hide(speed) });//單擊空白區(qū)域隱藏
$("#racePop").click(function(event) { $("#racePop").hide(speed) });//單擊彈出層則自身隱藏
});
</script>
完整實例
<!-- 漸變彈出層 -->
<div id="race"><a href="#">點擊</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;//動畫速度
$("#race a").click(function(event){//綁定事件處理
event.stopPropagation();
var offset = $(event.target).offset();//取消事件冒泡
$("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//設置彈出層位置
$("#racePop").show(speed);//動畫顯示
});
$(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>
相關文章
從前面的示例中不難看出validate中自帶的驗證方法足以滿足一般的要求，對于特別的要求可以使用addMethod(name,method,message)添加自定義的驗證規(guī)則，下面的示例中添加了一個用于正則表達式驗證的擴展驗證的方法2011-09-09
Jquery ajax請求導出Excel表格的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫query ajax請求導出Excel表格的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery實現(xiàn)切換字體大小的方法,實例分析了jQuery操作字體css樣式的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery 選擇符詳細介紹及整理的相關資料,這里整理了選擇符的一些資料，幫助到家學習這部分內容，需要的朋友可以參考下2016-12-12
淺析jQuery中調用ajax方法時在不同瀏覽器中遇到的問題
這篇文章主要介紹了jQuery中調用ajax方法時在不同瀏覽器中遇到的問題，因不同瀏覽器默認設置的不同造成的問題2014-06-06
這篇文章主要介紹了jQuery中focus事件用法,以實例形式分析了獲取焦點時focus事件的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
flexigrid是類似ext grid的JS表格，不過基于jQuery，目前只是beta版，例子不十分完整。2010-07-07
jQuery中為我們提供了很多有用的方法和屬性，自己總結的一些常用的函數(shù)，方法。個人認為在開發(fā)中會比較常用的，僅供大家學習和參考。2009-06-06
jQuery Lightbox（balupton版）圖片展示插件demo2010-04-04