<!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>

来源：http://www.phpstudy.net/b.php/85306.html

javascript弹层的更多相关文章

  1. javascript弹层组件

    组件名称:layui 网址:http://layer.layui.com/ 里面有一个选择日期的组件,在导航的独立组件里,可以用来选择时间.

  2. javascript右下角弹层及自动隐藏

    在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应 ...

  3. 弹层，iframe页面

    前台页面: <img src="chb/老玩家 好礼送.jpg" border="0" width="202" height=&quo ...

  4. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  5. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. 富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  7. layerweb弹层组件（SSH框架下）

    action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...

  8. 微网站|h5弹窗|手机网站 html5 弹窗、弹层、提示框、加载条

    为了精确体验,您可通过Chrome设备模式浏览.或通过[url=]手机扫二维码进入[/url] layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层 ...

  9. 微网站|手机端html弹窗、弹层、提示框、加载条

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

随机推荐

  1. 基于prometheus监控k8s集群

    本文建立在你已经会安装prometheus服务的基础之上,如果你还不会安装,请参考:prometheus多维度监控容器 如果你还没有安装库k8s集群,情参考: 从零开始搭建基于calico的kuben ...

  2. 如何打包和生成你的Android应用程序

    原文:http://android.eoe.cn/topic/android_sdk 在生成过程中,你的Android项目的编译和打包成一个apk文件,为您的应用程序二进制的容器.它包含了所有必要的信 ...

  3. C语言浮点数存储结构

    float类型占四个字节,每个字节占8位,总共32位,其内存结构如下图: 31位为符号位:0表示正数,1表示负数 31~23位:共8位表示指数位,内存存储数据从0~2^8-1=255,由于指数可以是正 ...

  4. 牛腩学Kotlin做Android应用

    牛腩学Kotlin做Android应用,蹭热度视频,边学边做, 01-kotlin插件安装及hello world 02-kotlin基础语法速览 哔哩哔哩观看地址:http://www.bilibi ...

  5. 【Unity】第8章 GUI开发

    分类:Unity.C#.VS2015 创建日期:2016-04-27 一.简介 前面的章节中实际上已经多次使用了GUI,只不过用法都比较简单,这一章系统地介绍Unity 5.x自带的GUI(称为Uni ...

  6. redis-3.0.0_rc5的RPM包制定

    首先查看脚本: # cat /tmp/redis_before.sh #!/bin/bash if [ ! -d /apps/redis-3.0.0-rc5 ];then mkdir -p /apps ...

  7. 菜鸟学EJB（一）——第一个实例

    EJB用了那么长时间了,从来没写过关于它的东西,挺对不住它的.今天先写一个简单的小实例,虽然小但是却能体现出EJB的核心——分布式.我们可以将业务逻辑的接口跟实现部署到一台机器上,将调用它们的客户端部 ...

  8. Java 的双重分发与 Visitor 模式

    双重分发(Double Dispatch) 什么是双重分发? 谈起面向对象的程序设计时,常说起的面向对象的「多态」,其中关于多态,经常有一个说法是「父类引用指向子类对象」. 这种父类的引用指向子类对象 ...

  9. 【Android】OAuth验证和新浪微博的oauth实现

    关于OAuth验证 OAuth是当下流行的授权方案,twitter,facebook,google等大型网站的开放平台都支持了oauth验证模式,国内的新浪微博.腾讯微博.163微博的开放平台也相继支 ...

  10. 【转】更改 shell 终端的默认键绑定为 vi 模式

    我们使用的 shell 终端是 bash,它的默认键绑定方式是 emacs 模式.比如键入 Ctrl+a 光标会停在行首,Ctrl+e 光标会停在行尾等等. 如果希望在终端输入时使用 vi 的模式,比 ...