你在这儿: 首页>严肃的

jQuery写的坐标定位

来源:锋迷全球   时间: 2011-05-25   浏览次数:0

原理:用两个div,一个用右边框+下边框,另一个用上边框+左边框组成个十字来显示。找出鼠标的x,y 轴位置,对div长宽进行加加减减即可。


坐标效果图

原理:用两个div,一个用右边框+下边框,另一个用上边框+左边框组成个十字来显示。找出鼠标的x,y 轴位置,对div长宽进行加加减减即可。

代码如下,保存为xx.html即可

______________________________________________________________________________________________________________

<html>

<head>

<title>jQuery坐标</title>

<style type="text/css">
body{background:#000 url('http://www.cozof.com/demo/coordinatesx/images/game.jpeg');padding:0px;margin:0px;overflow:hidden;/*禁止滚动条*/}
#coordinatesx{border-bottom:1px solid red;border-right:1px solid red;width:0px;height:0px;position:absolute;_overflow:hidden/*_|ie6 hack.由于div高度无法设为0*/}
#coordinatesy{border-top:1px solid red;border-left:1px solid red;position:absolute;}/*|-*/
#spShow{position:absolute;font-size:12px;color:red;}
.text{padding:10px;font-size:12px;color:#ccc;}
</style>
<script type="text/javascript" src="http://www.cozof.com/images/js/jquery.min.1.5.js"></script>
<script type="text/javascript">
/*
*code by 锋迷全球
*2011/5/24 
*/
$(function()
{		
	$('body').mousemove(function(e)
	{
		showCoor(e);		
	}).toggle
	(
		function()
		{
			$('#switch').val('0');//停止. 因为若这采用unbind的方式,后面无法启用,所以用这种开关的方法
		},
		function()
		{
			$('#switch').val('1');//继续
		}
	 );
});

function showCoor(e)
{   
	var swi = $.trim( $('#switch').val() );//开关
    if(swi == 1)
	{
		var ex = e.clientX;//mouse X
		var ey = e.clientY;		
		var ww = $(window).width();//窗口宽度
		var wh = $(window).height();

		var str = '坐标:'+ ex +','+ ey +'<br/><font color="#ccc">点鼠标左键停在当前位置;再点击继续。</font>';
		$('#spShow').css({"left":(ex+10) +"px","top":(ey-33) +"px"}).html(str);//显示坐标
		$('#coordinatesx').css({"width":ex +"px","height":ey +"px"});
		if($.browser.msie && $.browser.version == '6.0')//ie6 hack.如果是ie6,减一像素
		{
			ex -= 1;
			ey -= 1;
		} 		
		$('#coordinatesy').css({"width":(ww-ex) +"px","height":(wh-ey) +"px","left":ex +"px","top":ey +"px"});//从当前鼠标位置开始,到剩余的空间
	}
}
</script>
</head>
<body>
<!--开始:此前body后不要放置任何东西-->
<div id="coordinatesx"></div>
<div id="coordinatesy"></div>
<span id="spShow" /></span>
<input type="hidden" id="switch" value="1"/>
<!--结束-->



<div class="text">
<pre>

jQuery坐标
code by 锋迷全球

</pre>
</div>


 

</html>

______________________________________________________________________________________________________________

演示地址:点此打开 (北方的用户打不开?)

</body>

 

 本文链接:http://www.cozof.com/show/21.shtml   [复制] [收藏]
----------------------------------------------------------------------------------------------------------------------------
分享本文到:
更多
----------------------------------------------------------------------------------------------------------------------------
关键词:jQuery  坐标  javascript  定位  
你可能还感兴趣的:

----------------------------------------------------------------------------------------------------------------------------
已有0位网友发表了看法
  • 用户名:
  • 内  容:
  • 验证码:
    点击换一张

最新

津巴布韦选丑大赛 众多男子角逐
哈尔滨佛学院正式成立了!
英国军情六处:007情商太低 现实
世界上10个最戒备森严的地方
丑是好的至少你知道大家是因为你
比尔·盖茨豪宅,参观1次3.5万美元
林肯的小趣事
替补登场9分钟5球创世界纪录——

推荐

能认出5字以上就是绝对是高手!
世界上最好的10支特种部队,GIS特
谷歌变身子公司,成立母公司Alphab
鲁迅其实还是一名资深设计师
美国在国际奥数比赛中“破天荒”
关于性吸引的5个真相
不会死的生物:美洲龙虾、刺果松、
五十大最佳发明之激光打蚊子

最热门

为什么百度腾讯阿里巴巴等要在开
检测JSON代码合法性,JSON格式化
如何取消驱动精灵开机启动
15款Android(安卓)下常用有趣有
求种子地址!
firefox(火狐)如何像ie一样显示j
你们这帮混蛋,鲁迅到底是谁,原名冰
法克.尤尔.马泽尔 百科恶搞

随机

爱你一万年。不过前一百年不能爱
结果,朋友把医生咬了
zend studio不显示文件只显示文
这个星球上再也没有等离子电视了
关于蝙蝠侠你可能不知道的10件事
这位同学,醒醒再睡
离开一个地方,风景就不再属于你;
房租太他妈高党?

最近浏览

   清除记录

联系

合  作: [email protected] [复制]
服  务: [email protected] [复制]
投  稿: [email protected] [复制]
不  解: [email protected] [复制]

cozof qr code
手机访问:www.cozof.com/wap/

这是什么