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 相关文章推荐
JSONP 跨域共享信息
Aug 16 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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实现的带超时功能get_headers函数
2015/02/10 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python如何在循环引用中管理内存
2018/03/20 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python实现图像全景拼接
2020/03/27 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
招商经理岗位职责
2013/11/16 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
工作分析计划书
2014/04/30 职场文书
关于安全演讲稿
2014/05/09 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2014年医务科工作总结
2014/12/18 职场文书
开展警示教育活动总结
2015/05/09 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
python基础之类属性和实例属性
2021/10/24 Python
Pygame Event事件模块的详细示例
2021/11/17 Python
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js