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 相关文章推荐
javascript克隆对象深度介绍
Nov 20 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
浅析Vue 生命周期
Jun 21 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 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
网络资源
2006/10/09 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python比较2个xml内容的方法
2015/05/11 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
实时获取Python的print输出流方法
2019/01/07 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
天猫活动策划方案
2014/08/21 职场文书
抗洪救灾标语
2014/10/08 职场文书
师范生见习报告
2014/10/31 职场文书
二年级作文之动物作文
2019/11/13 职场文书