jquery鼠标经过淡入显示提示框

作者:enenba | 发表于:2012-06-05 22:44 | 分类:学点JQuery

我看了JQuery教程学会了鼠标事件,做了这个经过时会有对话框出来,是渐显的,还会跟随鼠标提示,使用a标签的title也可以是做到提示,但不是很有个性。我还是比较喜欢这个jq的提示特效,可以做在关键词上还是不错的。

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标经过淡入显示提示框 演示</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
.div{ border:1px solid #0000FF; float:left; width:200px; height:200px; margin:10px;}
div#tip{ position:absolute; width:100px; height:auto; border:1px solid #00CC66;}
.div1{border:0;cursor:pointer;width:auto; height:auto;}
</style>
</head>
<body>

<div id="tip" style="display:none">提示内容</div>
<div class="div"></div>
<div class="div"></div>
<div class="div div1">enenba</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('.div').hover(
			function(){
				$('#tip').fadeIn('slow');
			}
		);
		
		$('.div').mousemove(function(e){
			var top = e.pageY+5;
			var left = e.pageX+5;
			$('#tip').css({
				'top' : top + 'px',
				'left': left+ 'px'
			});
		});
		
		$('.div').mouseout(function(){
			$('#tip').hide();
		});
		
	});
</script>
</body>
</html>

看附件演示

end

附件下载/演示源码:
mouse.html1.04KB

上一篇: 扒谱,扒站,扒特效,扒数据,扒工具.....   |   下一篇:emlog显示评论者的站点机房» 标签: jquery 鼠标经过 提示框

评论: