有关js弹出层位置随鼠标点击而改变的问题
日期:2009年11月25日作者:kos
来自分类:DIV+CSS, JAVASCRIPT查看:(724)评论:(1)

  大家都知道,当在桌面上点击鼠标右键的时候,会有一个弹出菜单跟随在鼠标点击的位置,当鼠标在屏幕的底部点击的时候,弹出菜单就会弹到点击位置上面的相应位置,当鼠标屏幕的右部点击的时候,弹出菜单就会弹到点击位置左部的相应位置。

思路如下:
  弹出层的位置与点击位置和弹出层的宽度高度;
  及body的宽度和高度有关。

具体判断如下:
  如果hit_x + div_width > body_width 则弹出层的位置超出范围,则让弹出层显示在点击位置的左部,否则显示在右部;
  如果hit_y + div_height> body_height则弹出层的位置超出范围,则让弹出层显示在点击位置的上部,否则显示在下部。

比如下面的例子,你可以把预览网页窗口化到一定大小以查看效果

CODE
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

以上实例还牵涉到另外一个功能,即给指定的对象赋值的问题

解决方法如下:
  首页,我们点击某一处的时候,把当前点击对象传到方法体里面去,在js里面把这个值提出来,存放到另外一个位置,并且每点击不同的地方就得到不同的对象。
具体操作如下:


var bakObj; //这里定义一个全局变量,作用是让后面的点击方法执行时给它赋值
function openFloatdiv(obj){//这里就是点击某一对象执行的方法,执行方法处调用js的格式是onclick="openFloatdiv(this)"
bakObj = obj;//改变全局变量为当前点击对象
}

这样,定义的全局变量值就改变了,你可以通过在最后加一句alert(bakObj)查看效果。

接下来就是给指定对象赋值的问题,具体操作如下:

function setValue(value){//所要执行的赋值方法,value为要给对象赋的值,调用方法为张三
bakObj.innerHTML = value;//让最初点击位置的显示数据为当前赋予的值,bakObj就是初设的全局变量
}

这样,你就可以把以上的介绍放到你的html中结合起来试试效果;看是否达到目的了!

 

相关下载:
  js下载:chooseCustomer.js
  css下载:chooseCustomer.css

网友评论:
共 1 条评论
  • 小T -- 2009/11/26 10:55:24

    很好很强大

  •  姓名(必填)
     邮箱(必填,但不公开)
     个人主页