jquery简单的弹出层浮动层代码


Posted in Javascript onApril 27, 2015

jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移。初次运行时请按F5刷新,载入远程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="/ajaxjs/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>

以上就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 #Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
使用console进行性能测试
Apr 27 #Javascript
浅谈javascript实现八大排序
Apr 27 #Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 #Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
php中adodbzip类实例
2014/12/08 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
微信小程序实现折线图的示例代码
2019/06/07 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Java分治归并排序算法实例详解
2017/12/12 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
面试后感谢信
2014/02/01 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
检讨书之工作不认真
2019/08/14 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
vscode内网访问服务器的方法
2022/06/28 Servers