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 相关文章推荐
js 页面元素的几个用法总结
Nov 18 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
初识Node.js
Sep 03 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
javascript中的location用法简单介绍
2007/03/07 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
老生常谈Python基础之字符编码
2017/06/14 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python3的pip路径在哪
2020/06/23 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
培训班主持词
2014/03/28 职场文书
租赁意向书范本
2014/04/01 职场文书
门前三包责任书
2014/04/15 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
社会工作专业自荐信
2014/09/26 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书