81,091
社区成员
发帖
与我相关
我的任务
分享
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");
}
$("#img").mousemove(function(e){
//改变层div1坐标的样式,达到移动层的效果
$("#div2").html(" X坐标:" + e.pageX + " <br> Y轴坐标:" + e.pageY);
$("#div1").css({left : e.pageX + 10 , top : e.pageY + 10 });
})
<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>
<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>