jquery实现鼠标悬停显示大图（个人随笔）

浏览数：17 / 时间：2015年06月09日

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片放大</title>
<link type="text/css" rel="stylesheet" href="stye/style.css"/>
<script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JavaScript/action.js"></script>
</head>

<body>
	<div id="gallery">
    	<ul>
        	<li>
            	<a class="tooltip" href="images/1.jpg" title="图片1" target="_blank"><img src="images/1.jpg"/></a>
            </li>
            <li>
            	<a class="tooltip" href="images/2.jpg" title="图片2" target="_blank"><img src="images/2.jpg"/></a>
            </li>
            <li>
            	<a class="tooltip" href="images/3.jpg" title="图片3" target="_blank"><img src="images/3.jpg"/></a>
            </li>
        </ul>
    </div>
</body>
</html>

　　CSS代码：

@charset "utf-8";
/* CSS Document */

body,ul,li{
	margin:0px;
	padding:0px;}

#gallery img{
	width:300px;
	height:300px;
	border:1px solid blue;}
	
#gallery ul{
	list-style:none;}

#gallery li{
	float:left;
	margin-left:20px;}

#zoomView{
	position:absolute;}

　　JS代码：

// JavaScript Document

$(function(){
	$("a.tooltip").mouseover(function(e){       //鼠标移入
		var myTitle=this.title;
		var imgTitle=myTitle?"<br/>"+myTitle:"";	//获取图片的title
		var zoomView=$(‘<div id="zoomView"><img src="‘+this.href+‘" alt="放大提示"/>‘+imgTitle+"</div>"); //建立图片查看框
		$("body").append(zoomView);
		$("#zoomView").css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});  //注意得在CSS文件中将其设置为绝对定位
	}).mousemove(function(e){
		$("#zoomView").css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});	//鼠标移动时及时更新图片查看框的坐标
	}).mouseout(function(){
		$("#zoomView").remove();	//鼠标移出时删除之前建立的图片查看框
	});
	
});

　　效果如下：

技术分享