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 相关文章推荐
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
JS将unicode码转中文方法
May 08 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
vue路由跳转传参数的方法
May 06 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
js模拟微博发布消息
2017/02/23 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python实现k-means聚类算法
2018/02/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python for i in range ()用法详解
2020/09/18 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
食品安全责任书
2014/04/15 职场文书
班级年度安全计划书
2014/05/01 职场文书
课外科技活动总结
2014/08/27 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2014年底工作总结
2014/12/15 职场文书
清明扫墓感想
2015/08/11 职场文书