jquery实现可自动判断位置的弹出层效果代码


Posted in Javascript onOctober 12, 2015

本文实例讲述了jquery实现可自动判断位置的弹出层效果代码。分享给大家供大家参考。具体如下:

这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移。初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移。

运行效果截图如下:

jquery实现可自动判断位置的弹出层效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery弹出层浮动层代码</title>
<script src="jquery1.3.2.js" type="text/javascript"></script>
<style>
*{ margin:0; padding:0}
body{ margin:0; padding:0; font-size:12px}
ul,li{ list-style:none}
ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;}
li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px}
li.current{background:#eee}
.wrap{ width:158px; background:#eee; position:absolute;}
</style>
<script type="text/javascript">
$(function(){
 $(".wrap").hide();
 var objW=$(".wrap").width();
 var objH=$(".wrap").height();
 $(document).mousedown(function(e){
  var selfX=objW+e.pageX;
  var selfY=objH+e.pageY
  var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft;
  var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop;
  if(selfX>bodyW && selfY>bodyH){
   $(".wrap").css({top:(bodyH-objH),left:(bodyW-objW)}).show();
  }else if(selfY>bodyH){
   $(".wrap").css({top:(bodyH-objH),left:e.pageX}).show();
  }else if(selfX>bodyW){
   $(".wrap").css({top:e.pageY,left:(bodyW-objW)}).show();
  }else{
   $(".wrap").css({top:e.pageY,left:e.pageX}).show();
  }
 })
 $("li").hover(function(){
  $(this).addClass("current");
 },function(){
  $(this).removeClass("current");
 }).click(function(){
  alert($(this).text())
  $(this).parent().parent().hide();
 })
})
</script>
</head>
<body>
<div style="height:800px;width:900px"> </div>
<div style="position:absolute;top:300px;left:300px"><span style="color:#f00;font-size:28px">请按F5刷新,才能看到效果,</span><br>点击鼠标左键,弹出层,<br>在最右边点击时层自动往左移</div>
<div class="wrap">
 <ul onmousedown="event.cancelBubble = true">
  <li>连江</li>
  <li>宁德</li>
  <li>福州</li>
  <li>厦门</li>
  <li>北京</li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js替代copy(示例代码)
Nov 27 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
AngularJS自动表单验证
Feb 01 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
Javascript函数式编程语言
Oct 11 #Javascript
Javascript函数式编程简单介绍
Oct 11 #Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 #Javascript
You might like
php搜索文件程序分享
2015/10/30 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
javascript实现简易计算器
2017/02/01 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
简单实现python数独游戏
2018/03/30 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
2014年教研员工作总结
2014/12/23 职场文书
导游词之任弼时故居
2020/01/07 职场文书