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 相关文章推荐
菜单效果
Oct 14 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
smarty的section嵌套循环用法示例
2016/05/28 PHP
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
详解node.js 事件循环
2020/07/22 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
Python yield使用方法示例
2013/12/04 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
Django model class Meta原理解析
2020/11/14 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
函授生自我鉴定
2014/03/25 职场文书
小露珠教学反思
2014/04/30 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
2016新年致辞
2015/08/01 职场文书
医德医风学习心得体会
2016/01/25 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL