js实现遮罩层划出效果是生成div而不是显示

同遮盖层划入一样，单纯的遮盖层划出的话算的上是非常简单了，但是在这里它却就不这么简单了，而且我前面还选了个比较麻烦的生成div，而不是显示存在的div，这里有那么几点需要特别注意：

1、遮盖层出现后，鼠标哪怕不动，也已经是在遮盖层上，已经不再给出的div区域了，所以注意监听的位置；

2、onmouseout和onmouseover都是瞬时触发的，这点很重要；

3、在实际应用中，已存在的div的显示比临时创建肯定要有效的多；

这样我还是上一下代码吧，其实之前的地方没怎么变，我只记录改变的地方，那就是onmouseout监听加在了哪呢？

var getOneDiv=function(){ 

var div=document.createElement("div");
div.style.position="absolute";
div.style.display="block";
div.style.zIndex="10";
div.style.background="yellow";
div.addEventListener("mouseout",function(event){//我把它加在了这里，而这里监听的判断与之前的划入几乎如出一辙
var x=event.clientX;
var y=event.clientY;
left=x-test.offsetLeft;
top=y-test.offsetTop;
right=test.offsetLeft+test.offsetWidth-x;
bottom=test.offsetTop+test.offsetHeight-y;
arr=[];
arr.push(top);
arr.push(right);
arr.push(bottom);
arr.push(left);
var least=findLeast(arr); 

if(least==1){
}
if(least==2){//还是距离和宽度的同时改变啊
div.style.left=test.offsetLeft+"px";
div.style.top=test.offsetTop+"px";
div.style.height=test.offsetHeight+"px";
div.style.width=width+"px";
var changeWidth2=setInterval(function(){
if(div.offsetLeft>=test.offsetLeft+test.offsetWidth){
clearInterval(changeWidth2);
check=true;//关键点
}else{
marginLeft=marginLeft+10;
width=width-10;
div.style.width=width+"px";
div.style.left=marginLeft+"px";
}
},30);
}
if(least==3){ 

}
if(least==4){//向左划出，width作为全局变量，这次就是不断减小了
div.style.left=test.offsetLeft+"px";
div.style.top=test.offsetTop+"px";
div.style.height=test.offsetHeight+"px";
div.style.width=width+"px";
var changeWidth1=setInterval(function(){
if(div.offsetWidth<=0){
clearInterval(changeWidth1);
check=true;//这里也比较关键哦
}else{
width=width-10;
div.style.width=width+"px";
}
},30);
}
})
return div;
}

就这样简单的都实现了划出划入的效果，简单的看的话确实已经有其形了，但是不得不说，这是个拙劣到了极点的实现，还有多少点是还没有加入的，还有多少情况是还没有考虑到的，另外，这代码的重复编写，优化优化,喏喏...

赞 (0)

相关推荐

  • js实现上下左右弹框划出效果

    js实现上下左右弹框划出效果

    效果图: 图(1)初始图 图(2)点击"从右侧划出" 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,

  • 轻松实现js弹框显示选项

    轻松实现js弹框显示选项

    先看看效果: 效果 -点击弹出弹框 -点击复选框,已选div中 显示已选中的选项 -再次点击取消选中状态,已选div中 显示的选中选项取消显示 -点击 已选 div中的 选项x图标,取消显示该选项 ,取消相应复选框选中状态​ -点击大类,小类取消选中状态,点击小类,选中大类取消选中状态 -最多3个选项可以被选中 -点击x图标关闭弹框 -点击确定按钮显示选择后的结果 代码块 html片段代码 <div class="one_search clearfix"> <labe

  • Bootstrap和Angularjs配合自制弹框的实例代码

    指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem

  • javascript实现无法关闭的弹框

    大家都见过某网页中的恶意广告,你关闭了又出来了!为何,JS来告诉你 HTML <body> <h3 class="whiteColor">无法关闭的弹框,打不死的小强!</h3> <div id="middleBox"> <a href="javascript:;" class="close_btn" id="closeBtn"><img s

  • struts json 类型异常返回到js弹框问题解决办法

    struts json 类型异常返回到js弹框问题解决办法 当struts 框架配置了异常时 例如: <package name="sysCnn" namespace="/" extends="json-default"> <global-results> <result name="error">/WEB-INF/pages/error.jsp</result> <res

  • js实现遮罩层划出效果是生成div而不是显示

    同遮盖层划入一样,单纯的遮盖层划出的话算的上是非常简单了,但是在这里它却就不这么简单了,而且我前面还选了个比较麻烦的生成div,而不是显示存在的div,这里有那么几点需要特别注意: 1.遮盖层出现后,鼠标哪怕不动,也已经是在遮盖层上,已经不再给出的div区域了,所以注意监听的位置: 2.onmouseout和onmouseover都是瞬时触发的,这点很重要: 3.在实际应用中,已存在的div的显示比临时创建肯定要有效的多: 这样我还是上一下代码吧,其实之前的地方没怎么变,我只记录改变的地方,那就

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • 使用jQuery制作遮罩层弹出效果的极简实例分享

    客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西.这种效果在网上很常见,例如:QQ空间浏览相册等.这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了Demo. HTML 结构 首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示.那么我们的 H

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

    本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

  • 纯js实现遮罩层效果原理分析

    可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原理如下: * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: 复制代码 代码如下: <html>

  • Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果

    Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果

    先来看看,今天要实现的自定义控件效果图: 关于ViewDragHelper的使用,大家可以先看这篇文章ViewDragHelper的使用介绍 实现该自定义控件的大体步骤如下: 1.ViewDragHelper使用的3部曲,初始化ViewDragHelper,传递触摸事件,实现ViewDragHelper.Callback抽象类. 2.需要创建2个直接的子View,分别是前景View和背景View,代表ListView每一项Item的布局的组成,如下所示: 未划出时显示的FrontView: 划出

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

  • js+html5实现半透明遮罩层弹框效果

    js+html5实现半透明遮罩层弹框效果

    点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1.遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧: 应该这样: 需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2.半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代码show <!docty

  • 父页面显示遮罩层弹出半透明状态的dialog

    父页面显示遮罩层弹出半透明状态的dialog

    上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的dialog.dialog即弹出的子页面,div. 效果图如下:  具体代码实现如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <MET

随机推荐