Jquery创建一个层当鼠标移动到层上面不消失效果


Posted in Javascript onDecember 12, 2013
<!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=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
#Adiv div {float:left; width:100px;border:1px solid #333;margin-top:100px;} 
#SDiv {width:135px;position: absolute;} 
</style> 
<script type="text/javascript" src="js/jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var x = -90; 
var y = -70; 
$("#Adiv div").mouseenter(function(e){ 
this.xx = ($(this).index() + 1) * 100; 
this.yy = $(this).offset().top; 
var login = $(this).attr("href"); 
if($("#SDiv")){$("#SDiv").remove();} 
var div = "<div id='SDiv' style='border:1px solid #333'><img src='images/login_box/box_onmouse.png' border='0' usemap='#Map' /><map name='Map' id='Map'><area shape='rect' id='divLogin' coords='16,14,67,35' href="+login+" /><area shape='rect' id='divRegister' coords='75,15,127,37' href='http://www.baidu.com' /></map></div>"; 
$("body").append(div); 
$("#SDiv").css({ "top": (this.yy + y) + "px", "left": (this.xx + x) + "px" }); 
}).mouseleave(function (e) { 
var ex = e.pageX; 
var ey = e.pageY; 
var sx = $("#SDiv").offset().top; 
var sxx = $("#SDiv").offset().top + 72; 
var sy = $("#SDiv").offset().left; 
var syy = $("#SDiv").offset().left + 135; 
if(ey > sx && ey <= sxx && ex > sy && ex <= syy){ 
$("#SDiv").mouseleave(function(){$("#SDiv").remove();}); 
return false; 
} 
$("#SDiv").remove(); 
}); 
}) 
</script> 
</head> 
<body> 
<!-- 
<div class="box_onmouse"><img src="images/login_box/box_onmouse.png" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
<area shape="rect" id="divLogin" coords="16,14,67,35" href="#" /> 
<area shape="rect" id="divRegister" coords="75,15,127,37" href="#" /> 
</map> 
</div> 
--> 
<div id="Adiv"> 
<div href="11111">1111111</div> 
<div href="22222">2222222</div> 
<div href="33333">3333333</div> 
</div> 
<div>项目中有这样的需求:鼠标移动到某个div上面时动态创建一个层,这个层中有2个按钮图片(美工切换了),每个图片链接不同地址(链接地址有前面的div提供),鼠标移除这个层则移除创建的div,如果鼠标移动到这个创建的div上面则不移除</div> 
</body> 
</html>
Javascript 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
js仿京东放大镜效果
Aug 09 Javascript
jQuery的each终止或跳过示例代码
Dec 12 #Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 #Javascript
js使下拉列表框可编辑不止是选择
Dec 12 #Javascript
深入理解JavaScript是如何实现继承的
Dec 12 #Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 #Javascript
javascripit实现密码强度检测代码分享
Dec 12 #Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP闭包函数详解
2016/02/13 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
合作经营协议书
2014/04/17 职场文书
写景作文评语集锦
2014/12/25 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android