<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>散人笔记 &#187; 弹出菜单</title>
	<atom:link href="http://www.uideas.cn/post/tag/%e5%bc%b9%e5%87%ba%e8%8f%9c%e5%8d%95/feed" rel="self" type="application/rss+xml" />
	<link>http://www.uideas.cn</link>
	<description>生活来源于创意,所以我懂生活</description>
	<lastBuildDate>Sun, 22 Aug 2010 07:17:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>有关js弹出层位置随鼠标点击而改变的问题</title>
		<link>http://www.uideas.cn/post/162.html</link>
		<comments>http://www.uideas.cn/post/162.html#comments</comments>
		<pubDate>Wed, 25 Nov 2009 14:37:44 +0000</pubDate>
		<dc:creator>kos</dc:creator>
				<category><![CDATA[DIV+CSS]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[层跟随]]></category>
		<category><![CDATA[弹出层定位]]></category>
		<category><![CDATA[弹出菜单]]></category>
		<category><![CDATA[桌面右键]]></category>
		<category><![CDATA[赋值]]></category>

		<guid isPermaLink="false">http://www.uideas.cn/?p=162</guid>
		<description><![CDATA[　　大家都知道，当在桌面上点击鼠标右键的时候，会有一个弹出菜单跟随在鼠标点击的位置，当鼠标在屏幕的底部点击的时候，弹出菜单就会弹到点击位置上面的相应位置，当鼠标屏幕的右部点击的时候，弹出菜单就会弹到点击位置左部的相应位置。]]></description>
			<content:encoded><![CDATA[<p>　　大家都知道，当在桌面上点击鼠标右键的时候，会有一个弹出菜单跟随在鼠标点击的位置，当鼠标在屏幕的底部点击的时候，弹出菜单就会弹到点击位置上面的相应位置，当鼠标屏幕的右部点击的时候，弹出菜单就会弹到点击位置左部的相应位置。</p>
<p>思路如下：<br />
　　弹出层的位置与点击位置和弹出层的宽度高度；<br />
　　及body的宽度和高度有关。</p>
<p>具体判断如下：<br />
　　如果hit_x + div_width &gt; body_width 则弹出层的位置超出范围，则让弹出层显示在点击位置的左部，否则显示在右部；<br />
　　如果hit_y + div_height&gt; body_height则弹出层的位置超出范围，则让弹出层显示在点击位置的上部，否则显示在下部。</p>
<p>比如下面的例子，你可以把预览网页窗口化到一定大小以查看效果</p>
<form enctype="application/x-www-form-urlencoded" method="get"><code></p>
<div class="Nodiv">
<div class="Notitle">CODE</div>
<div class="Nocontent"><textarea class="textarea" cols="20" rows="8">&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;弹出层定位&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/chooseCustomer.css" &gt; &lt;script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/chooseCustomer.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;&lt;a target="_blank"&gt; &lt;table border="0" cellpadding="0" cellspacing="1" bgcolor="#0066CC" id="cu"&gt;   &lt;tr&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期一&lt;/th&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期二&lt;/th&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期三&lt;/th&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期四&lt;/th&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期五&lt;/th&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期六&lt;/th&gt;     &lt;th width="120" align="center" valign="middle"&gt;星期日&lt;/th&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;     &lt;td align="center" valign="middle" onClick="chooseCustomer(this)"&gt;&amp;nbsp;&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;div id="CustomerFram"&gt; &lt;div class="Fram"&gt; &lt;table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#0099FF" &gt;   &lt;tr&gt;     &lt;td colspan="2" style="text-align:right;"&gt;&lt;a onClick="setValue('&amp;nbsp;')" style="padding-right:20px;"&gt;清空&lt;/a&gt;&lt;a onClick="document.getElementById('CustomerFram').style.display = 'none';"&gt;关闭&lt;/a&gt;&lt;/td&gt;     &lt;/tr&gt;   &lt;tr&gt;     &lt;td width="60"&gt;课程&lt;/td&gt;     &lt;td&gt;说明&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;&lt;a onClick="setValue(this.innerHTML)"&gt;语文&lt;/a&gt;&lt;/td&gt;     &lt;td&gt;由张三老师任教&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;&lt;a onClick="setValue(this.innerHTML)"&gt;数学&lt;/a&gt;&lt;/td&gt;     &lt;td&gt;由李四老师任教&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;&lt;a onClick="setValue(this.innerHTML)"&gt;英语&lt;/a&gt;&lt;/td&gt;     &lt;td&gt;由王五老师任教&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;&lt;a onClick="setValue(this.innerHTML)"&gt;体育&lt;/a&gt;&lt;/td&gt;     &lt;td&gt;由孙六老师任教&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;  &lt;/html&gt; </textarea></div>
<div class="Nobutton">
<input onclick="RunCode(this)" type="button" value="运行代码" />
<input onclick="CopyCode(this)" type="button" value="复制代码" />
<input onclick="SaveCode(this)" type="button" value="保存代码" />
<span class="Nots">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span>
</div>
</div>
<p></code></form>
<p>以上实例还牵涉到另外一个功能，即给指定的对象赋值的问题</p>
<p>解决方法如下：<br />
　　首页，我们点击某一处的时候，把当前点击对象传到方法体里面去，在js里面把这个值提出来，存放到另外一个位置，并且每点击不同的地方就得到不同的对象。<br />
具体操作如下：</p>
<p><code><br />
var bakObj; //这里定义一个全局变量，作用是让后面的点击方法执行时给它赋值<br />
function openFloatdiv(obj){//这里就是点击某一对象执行的方法，执行方法处调用js的格式是onclick="openFloatdiv(this)"<br />
bakObj = obj;//改变全局变量为当前点击对象<br />
}</code><br />
这样，定义的全局变量值就改变了，你可以通过在最后加一句alert(bakObj)查看效果。</p>
<p>接下来就是给指定对象赋值的问题，具体操作如下：<br />
<code><br />
function setValue(value){//所要执行的赋值方法，value为要给对象赋的值，调用方法为<a onclick="setValue('张三')">张三</a><br />
bakObj.innerHTML = value;//让最初点击位置的显示数据为当前赋予的值，bakObj就是初设的全局变量<br />
}<br />
</code><br />
这样，你就可以把以上的介绍放到你的html中结合起来试试效果；看是否达到目的了！</p>
<p>&nbsp;</p>
<p><strong><span style="color: #993300;">相关下载：</span></strong><br />
　　js下载：<a style="font-weight:bold" href="http://www.uideas.cn/download/chooseCustomer.js">chooseCustomer.js</a><br />
　　css下载：<a style="font-weight:bold" href="http://www.uideas.cn/download/chooseCustomer.css">chooseCustomer.css</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uideas.cn/post/162.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
