大家都知道,当在桌面上点击鼠标右键的时候,会有一个弹出菜单跟随在鼠标点击的位置,当鼠标在屏幕的底部点击的时候,弹出菜单就会弹到点击位置上面的相应位置,当鼠标屏幕的右部点击的时候,弹出菜单就会弹到点击位置左部的相应位置。
思路如下:
弹出层的位置与点击位置和弹出层的宽度高度;
及body的宽度和高度有关。
具体判断如下:
如果hit_x + div_width > body_width 则弹出层的位置超出范围,则让弹出层显示在点击位置的左部,否则显示在右部;
如果hit_y + div_height> body_height则弹出层的位置超出范围,则让弹出层显示在点击位置的上部,否则显示在下部。
比如下面的例子,你可以把预览网页窗口化到一定大小以查看效果
以上实例还牵涉到另外一个功能,即给指定的对象赋值的问题
解决方法如下:
首页,我们点击某一处的时候,把当前点击对象传到方法体里面去,在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
很好很强大