两个jquery的问题

博客专家认证

2010-11-18 10:06:51



function showInfo(id) {

	var divNode = $("#showInfo" + id);

	divNode.fadeIn("fast");

	var myEvent = event || window.event;

	divNode.css("left", myEvent.clientX + 5 + "px").css("top", myEvent.clientY + 5 + "px");

}

这是一个onmosueover触发的事件，触发事件的元素是一张图片，让一个div层显示在鼠标右下角，我现在有两个问题！
1. 如何让这个事件延迟加载，就是当我鼠标无意识的停留其上的时候，不触发这个事件，只有停留时间超过1秒的时候才会触发
2. 当事件触发成功之后，我鼠标在这个图片上挪动，那么这个层也会跟着我鼠标动，而不会停留在原来的位置！
在网上找了很多例子，但是那些例子代码我都看得毫无头绪，希望大家给题个思路，给小弟指点一下！先谢过了！

...全文

238 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

寻道的 Programmer 2010-11-19

打赏
举报

哦，先头没看到，明白了，散分了！

小可同学 2010-11-19

打赏
举报

我的代码上不是写了么鼠标动层就跟着动，
具体怎么控制要看你想怎么控制了，得你自己去想，去写。
我只是提供一个方法。



$("#img").mousemove(function(e){

  	//改变层div1坐标的样式，达到移动层的效果

  	$("#div2").html("　　X坐标：" + e.pageX + " <br>　　Y轴坐标：" + e.pageY);

  	$("#div1").css({left : e.pageX + 10 , top : e.pageY + 10 }); 

})

小可同学 2010-11-19

打赏
举报

看看这样行不行



<script>

$(function(){

	$("#img").mousemove(function(e){

		//改变层div1坐标的样式

		$("#div2").html("　　X坐标：" + e.pageX + "<br>　　Y轴坐标：" + e.pageY);

		$("#div1").css({left : e.pageX + 10 , top : e.pageY + 10 });

	})

	$("#img").mouseover(function(){

		//延时一秒显示

		$("#div1").delay(1000).show(1);

	})

	$("#img").mouseout(function(){

		$("#div1").hide(1);

	})

})

</script>

<body>

<div>

<img id="img" align="baseline" src="http://pic.usfang.com/shtp/20081017/200810171125655.jpg" />

<div id="div1" style="display:none;position:absolute;width:200px;height:200px;background-color:#09F;"></div>

<div id="div2" style="width:200px;height:50px;background-color:#CF6;"></div>

</div>

寻道的 Programmer 2010-11-19

打赏
举报

UP一下！

寻道的 Programmer 2010-11-19

打赏
举报

顶一下！

寻道的 Programmer 2010-11-19

打赏
举报

谢谢楼上的回复，第二个问题谁能告诉我！

小可同学 2010-11-18

打赏
举报

第一个问题我回答一下：



<script>

$(function(){

	var timeout;

	$("#div1").mouseover(function(){

		//setTimeout(方法,1000)

		timeout = setTimeout(function(){alert("mouseover")},1000);

	})

	$("#div1").mouseout(function(){

		//取消事件

		clearTimeout(timeout);

	})

})

</script>

<body>

<div>

<div id="div1" style="width:200px;height:30px;background-color:#09F;"></div>

<div id="div2" style="width:200px;height:30px;background-color:#F90;"></div>

</div>