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 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
js中arguments对象的深入理解
May 14 Javascript
JavaScript实现图片放大镜效果
Jun 27 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中curl_multi的应用
2013/07/17 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python计算两个数的百分比方法
2018/06/29 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
基于python实现学生信息管理系统
2019/11/22 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
大学生就业策划书范文
2014/04/04 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
JavaScript实现简单计时器
2021/06/22 Javascript