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


Posted in Javascript onJuly 09, 2015

弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于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>
Javascript 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
JS闭包经典实例详解
Dec 20 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
详解JS函数防抖
Jun 05 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 #Javascript
浅谈JavaScript中null和undefined
Jul 09 #Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 #Javascript
JavaScript包装对象使用详解
Jul 09 #Javascript
jquery实现表单验证并阻止非法提交
Jul 09 #Javascript
jQuery实现tab选项卡效果的方法
Jul 08 #Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 #Javascript
You might like
php利用cookie实现访问次数统计代码
2011/05/19 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
vue实现微信分享功能
2018/11/28 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
vue的keep-alive用法技巧
2019/08/15 Javascript
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
EJB的基本架构
2016/09/22 面试题
应届毕业生求职自荐书
2014/01/03 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
条幅标语大全
2014/06/20 职场文书
自查自纠整改报告
2014/11/06 职场文书
2014年统计工作总结
2014/11/21 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Go语言基础知识点介绍
2021/07/04 Golang