m.lom599.com_手机版乐白家网址_乐百家手机首页登录

添加地图鼠标右键菜单,基于JavaScript实现移除

作者: 手机版乐白家网址  发布:2019-07-14

在Array对象中有给定的函数可以删除数组中指定的元素,虽然非常好用,但是总感觉看不到摸不着的比较别扭,下面就分享一个自定义的删除数组指定索引值元素的函数,希望给大家一个全新的思路。

窗口抖动效果在很多地方都有应用,例如网易的登陆窗口就有这样的效果,当登陆失败的时候就会出现抖动效果,这不但有动感,而且让人感觉新颖,下面是一段这样的代码实例,和大家分享一下。

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可。

代码实例如下:

代码如下:

      那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程。

var array=[]; 
array[0]="脚本之家一"; 
array[1]="脚本之家二"; 
array[2]="脚本之家三"; 
array[3]="脚本之家四"; 
array[4]="脚本之家五"; 
function remove(array,index)
{ 
 if(index<=(array.length-1))
 { 
  for(var i=index;i<array.length;i  )
  { 
   array[i]=array[i 1]; 
  } 
 }
 else
 { 
  throw new Error('超出最大索引!'); 
 } 
 array.length=array.length-1; 
 return array; 
} 
document.write(remove(array,2)); 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>窗口登陆效果</title>
<style type="text/css">
#win
{
 position:relative;
 width:100px;
 height:100px;
 background-color:#666;
}
</style>
<script type="text/javascript"> 
var a=['top','left'];
var b=0; 
var u;
function fudu()
{ 
 win.style[a[b%2]]=(b  )%4<2?"0px":"4px"; 
 if(b>15)
 {
 clearInterval(u);
 b=0
 } 
}
function zd()
{
 clearInterval(u); 
 u=setInterval(fudu,32) 
} 
window.onload=function()
{
 var bt=document.getElementById("bt");
 var win=document.getElementById("win");
 bt.onclick=zd;
}
</script> 
</head> 
<body > 
<button id="bt">点击振动</button> 
<div id="win"></div> 
</body> 
</html> 

openlayers 初始化页面过程

以上代码中,声明一个remove()函数,此函数具有两个参数,第一个参数是数组对象,第二个参数是要删除数组元素的索引值,所以上面的代码能够删除数组中的第三个元素,并输出删除元素户的数组。实现的原理也非常的简单,做一下简单的介绍:

以上代码中,当点击按钮的时候,div会出现抖动效果,当然此效果比较简单,这里仅仅是演示之用,在实际应用中可以自行扩展,下面简单介绍一下实现过程。

      openlayers 也是一个前端库,那么它肯定离不开 html 的运用,比如,我们首先需要在页面放置一个显示地图的 html 元素,一个 div 元素(假设其 id 属性设置为 “map”,后面简称为 map div),然后在地图初始化的时候指定这个元素,openlayers 会首先在这个元素中创建一个 class 为 ol-viewport 的 div 元素,其尺寸保持与 map div 相同,然后在 ol-viewport div 中创建一个 canvas 元素,在这个 canvas 元素中渲染请求到的地图;其次,还会添加一个 class 为 ol-overlaycontainer 的 div 元素,用来放置 overlay;最后,添加一个 class 为 ol-overlaycontainer-stopevent 的 div 元素,主要是放置 openlayers 的控件,上一篇添加 自定义扩展控件 的文章开篇有讲过,这里不是重点,我们不详细介绍了。

remove()函数首先判断传入的索引值是否大约数组的最大索引值array.length-1,如果大于则抛出错误,否则的话则将使用for循环从索引值i开始进行遍历,将索引值为i的数组值设置为低i 1项的,依次类推,原理大体如此,如有任何问题可以跟帖留言。

一.实现原理:

最后形成的 html dom 结构如下图:

ps:js删除数组指定元素

代码简单,原理也是非常简单。div是采用相对定位,当点击按钮的时候,就会通过定时器函数setInterval()不断调用fudu()函数,此函数可以通过取模的方式来不断的设置left或者top的属性值,也就是不断随机的调整div的位置,这样就实现了抖动效果,当b的值大于15的时候,停止抖动。

图片 1

var a = new Array("a","b","cc","d3");
//删除a数组的cc元素
//jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。
该函数属于全局jQuery对象。 jquery 1.2中添加的该静态方法
var index = $.inArray("cc",a);
if(index>=0){
//arrayObject.splice(index,howmany,item1,.....,itemX)
//参数  描述
//index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
//howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
//item1, ..., itemX 可选。向数组添加的新项目。
 a.splice(index,1);
 alert(a.toString());
}else{
 alert("error");
 return false;
}

二.代码注释:

图1 形成的DOM结构

您可能感兴趣的文章:

  • JS数组操作之增删改查的简单实现
  • JS中对数组元素进行增删改移的方法总结
  • js数组常用操作方法小结(增加,删除,合并,分割等)
  • javascript js 操作数组 增删改查的简单实现
  • 浅谈JavaScript中数组的增删改查
  • JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
  • JavaScript学习笔记之数组的增、删、改、查
  • JavaScript数组Array对象增加和删除元素方法总结
  • 比较新旧两个数组值得增加和删除的JS代码
  • js删除数组元素、清空数组的简单方法(必看)
  • 体验js中splice()的强大(插入、删除或替换数组的元素)
  • JS实现数组的增删改查操作示例

1.var a=['top','left'],声明一个数组,里面存储有top和left字符串。
2.var b=0,声明一个变量b并赋值为0。
3.var u,声明一个变量,作为定时器函数setInterval()的返回值。
4.function fudu(){},声明一个函数。
5.win.style[a[b%2]]=(b )%4<2?"0px":"4px",此段代码是核心部分,b%2取模运算的值为0或1,这样就成为数组a的索引值用于获取数组中的值。style[a[b%]这种形式和style.top这种形式的效果是一样的。]]=(b )%4<2?"0px":"4px",这样通过取模判断值是否小于2,来对div的top和left属性赋值。
6.if(b>15) {clearInterval(u); b=0} ,如果b的值大于15,那么就停止抖动,并将b的值重置为0。
7.function zd(){},声明一个函数。
8.clearInterval(u),停止定时器函数的运行,这句代码是为了防止连续点击按钮出现抖动可能不停止问题,因为两个抖动互相影响。
9.u=setInterval(fudu,30),使用定时器函数不断调用fudu函数。
10.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
11.var bt=document.getElementById("bt"),获取按钮对象。
12.var win=document.getElementById("win"),获取div对象。
13.bt.onclick=zd,为按钮注册事件处理函数。

      我们会想到在这个 map div 元素添加事件,然后右键弹出菜单,这个想法很自然,也确实可以实现,然而我们要想到后面的事情,至少对事情有一个全局的认识再下手,我们显示出菜单后,往往是要根据相应的地图所在位置进行一定的操作,那么我们的 contextmenu 的事件对象包含发生点击的屏幕坐标,但是如何根据屏幕坐标获得地图中的相应坐标系下的坐标将会比较困难。

下面给大家介绍仿QQ窗口抖动的JavaScript代码

困难在哪里呢?主要有以下的三点:

很不借的抖动特效,仿QQ聊天窗口的抖动效果,这里是用JavaScript代码实现,在配上这个假聊天窗口,没想到竟然和QQ的抖动效果还真相似,挺逗人。

首先,事件对象所含的坐标是相对于整个浏览器的视口、页面或者整个屏幕的;
其次,而显示地图的元素往往又是随意的大小和位置;
最后,屏幕的坐标系和地图的坐标系又往往完全不同,如何将相对与地图元素的坐标再转化为地图坐标系下的坐标?

<title>仿QQ窗口抖动</title>
<img id="win" style='position:relative' src="/jscss/demoimg/qqwinows.jpg">
<br /><br />
<button onclick="zd()">让我抖一下!</button>
<script >
function zd(u){ 
 var a=['top','left'],b=0;
 u=setInterval(function(){
 document.getElementById('win').style[a[b%2]]=(b  )%4<2?0:4;
 if(b>15){clearInterval(u);b=0}
 },32)
}
</script>

      首先,我们需要获得事件坐标相对于 map div (包含地图的元素)的坐标,然后将相对于 map div 的坐标转化为地图中的实际坐标。第一步中,我们可以通过计算获得,但是第二步必须通过 openlayers 来完成,因为只有 openlayers 对地图的坐标系最清楚,这在 openlayers 中也有相关的功能。庆幸的是,openlayers 中我们可以一步完成上述操作,只需要一个函数:map.getEventCoordinate(event),在下面的具体实现中,我会详细讲到这个函数。

通过以上实例代码给大家介绍javascript实现窗口抖动及qq窗口抖动的相关内容,希望本段代码能够帮助到大家。

下面我们看看具体如何实现吧。

您可能感兴趣的文章:

  • js模拟QQ窗口的抖动效果
  • javascript实现的仿腾讯QQ窗口抖动效果代码
  • js 窗口抖动示例
  • JS实现仿QQ聊天窗口抖动特效
  • 基于javascript实现窗口抖动效果

鼠标右键菜单具体实现

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:添加地图鼠标右键菜单,基于JavaScript实现移除

关键词: m.lom599.com