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 相关文章推荐
JS获取当前日期和时间的简单实例
Nov 19 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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闭包实例解析
2014/09/08 PHP
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
python错误处理详解
2014/09/28 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Django中的Model操作表的实现
2018/07/24 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Django实现celery定时任务过程解析
2020/04/21 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
兽医医药专业求职信
2014/07/27 职场文书
研究生个人学年总结
2015/02/14 职场文书
岗位职责范本大全
2015/02/26 职场文书
综合测评个人总结
2015/03/03 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Mysql中mvcc各场景理解应用
2022/08/05 MySQL