jQuery实现鼠标点击弹出渐变层的方法

(编辑：jimmy 日期: 2025/12/27 浏览：3 次 )

弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于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="/UploadFiles/2021-04-02/jquery.min.js">

上一篇：jquery.map()方法的使用详解
下一篇：javascript+ajax实现产品页面加载信息