jQuery實現滑鼠點擊彈出漸層層的方法，jquery滑鼠點擊

jQuery實現滑鼠點擊彈出漸層層的方法，jquery滑鼠點擊

彈出層在實際應用中我們經常會碰到大量的彈出層效果，下面我來做一個基於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) });//單擊空白地區隱藏 $("#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) });//單擊空白地區隱藏 $("#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>