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中jscript/javascript的条件编译
Sep 07 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
javascript实现前端分页功能
Nov 26 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现验证码校验功能
2017/11/16 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
详解Python3的TFTP文件传输
2018/06/26 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
父亲节感言
2015/08/03 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Python之matplotlib绘制折线图
2022/04/13 Python