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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JS Attribute属性操作详解
May 19 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
关于Vue中的options选项
Mar 22 Vue.js
原生JS实现分页
Apr 19 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数组实例总结与说明
2011/08/23 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
如何卸载python插件
2020/07/08 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
2014年高数考试作弊检讨书
2014/12/14 职场文书
外国人来华邀请函
2015/01/31 职场文书
酒店开业主持词
2015/07/02 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android