javascript弹层
<!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弹层的更多相关文章
- javascript弹层组件
组件名称:layui 网址:http://layer.layui.com/ 里面有一个选择日期的组件,在导航的独立组件里,可以用来选择时间.
- javascript右下角弹层及自动隐藏
在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应 ...
- 弹层,iframe页面
前台页面: <img src="chb/老玩家 好礼送.jpg" border="0" width="202" height=&quo ...
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- JQuery弹出层,实现弹层切换,可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- layerweb弹层组件(SSH框架下)
action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...
- 微网站|h5弹窗|手机网站 html5 弹窗、弹层、提示框、加载条
为了精确体验,您可通过Chrome设备模式浏览.或通过[url=]手机扫二维码进入[/url] layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层 ...
- 微网站|手机端html弹窗、弹层、提示框、加载条
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
随机推荐
- 冰淇淋三明治 (Android 4.0)介绍
原文:http://android.eoe.cn/topic/summary 冰淇淋三明治 (Android 4.0) 是 Android 在设计上的一个里程碑.它将 Honeycomb 提供给平板的 ...
- Android:UI 沉浸式体验,适合第一屏的引导图片、预览图片。
链接:http://www.cnblogs.com/liushilin/p/5799381.html
- 了解HTTP协议栈(实践篇)
关于http协议的理论知识,我在这里就不详细说明了,具体下面给出的链接有.接下来都是用具体的操作显示的,各位可以结合起来看. 一.使用nc打开端口,并使用浏览器进行访问 (对应文章中的HTTP协议详解 ...
- 内网ip范围
局域网可使用的网段(私网地址段)有三大段:10.0.0.0~10.255.255.255(A类)172.16.0.0~172.31.255.255(B类)192.168.0.0~192.168.255 ...
- 关于angular的$resource中的isArray属性问题
在之前的文章中讲到了在使用$resource的时候,有一个isArray属性. 这个属性在两个地方有提到: 1. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建R ...
- [Windows Azure] How to Configure Cloud Services
How to Configure Cloud Services To use this feature and other new Windows Azure capabilities, sign u ...
- [Windows Azure] What is a cloud service?
What is a cloud service? When you create an application and run it in Windows Azure, the code and co ...
- Android 编程下 Managing Your App's Memory
Managing Your App's Memory Random-access memory (RAM) 在任何软件开发环境中都是宝贵的资源,它在物理内存有限的移动操作系统中更为宝贵.虽然 Andr ...
- 【电子基础】IIC总线工作原理
IIC总线工作原理 I2C总线进行数据传送时,时钟信号为高电平期间,数据线上的数据必须保持稳定,只有在时钟线上的信号为低电平期间,数据线上的高电平或低电平状态才允许变化. 起始和终止信号 :SCL线为 ...
- Android MediaPlayer接口及状态迁移
[时间:2016-09] [状态:Open] [关键词:android,mediaplayer,播放接口,播放状态图] 引言 本文内容相对简单,作为后续处理的起点,简要整理了Android Media ...