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


Posted in Javascript onJuly 29, 2014

同遮盖层划入一样,单纯的遮盖层划出的话算的上是非常简单了,但是在这里它却就不这么简单了,而且我前面还选了个比较麻烦的生成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; 
}

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

Javascript 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 #Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 #Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 #Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 #Javascript
jquery JSON的解析方式示例介绍
Jul 27 #Javascript
jQuery提交多个表单的小技巧
Jul 27 #Javascript
用javascript对一个json数组深度赋值示例
Jul 27 #Javascript
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php短址转换实现方法
2015/02/25 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
Node.js编码规范
2014/07/14 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
UNIX特点都有哪些
2016/04/05 面试题
应聘美工求职信
2013/11/07 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
学前班学生评语
2014/12/29 职场文书
高三毕业评语
2014/12/31 职场文书
财务稽核岗位职责
2015/04/13 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python