Jquery实现鼠标放在图片上面显示大图效果

webcode

浏览: 5929553 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

才学jquery两天。代码可能比较杂，仅供参考。

引用 http://www.zhjie.net

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///E|/MyWeb/MyBlog/Js/jquery-1.7.2.js"></script>
<style type="text/css">
.imgDiv{ position:absolute;}
#showPic{ position:absolute; z-index:2; top:200px; left:200px; width:150px; height:300px; display:none;}
</style>

</head>

<body>
<div id="pic">
<img src="file:///F|/Picture/唯美宽屏桌面/jiping (1).jpg" width="300px" height="200px"  title="demo"/><br/>
<img src="file:///F|/Picture/唯美宽屏桌面/jiping (3).jpg" width="300px" height="200px"  title="demo"/>
</div>
<div id="showPic"><img class='imgDiv'></div>
<script type="text/javascript">
$("#pic img").mouseover(function(e){
	//var $img=$("");							//创建一个img标签
	//$("#showPic").append($img);					//将img插入到div
	var src=$(this).attr("src");					//获取当前src
	var scrTop=e.originalEvent.y || e.originalEvent.layerY || 0; 		//获取当前鼠标的Y坐标
	var scrLeft= e.originalEvent.x || e.originalEvent.layerX || 0;		//获取当前鼠标的X坐标
	$("#showPic").css("top",scrTop).css("left",scrLeft).show(500); 		//设置div宽度高度并显示
	$("#showPic img").attr("src",src).attr("width",'400px').attr('height','400px').addClass("imgDiv");//设置图片的路径.高度。宽度
});  /* 鼠标移开事件*/
$("#pic").mouseout(function(){
	$("#showPic").hide();
});
</script>
</body>
</html>

修改后

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
#tip{position:absolute; z-index:2; border:1px solid black; width:400px; background:black; color:white;}
li{ float:left; list-style:none; padding:0 10px;}
li img{ width:200px; height:150px;}
</style>
</head>

<body>
<ul>
	<li><img src="images/jiping (1).jpg" alt="第一张图片" /></li>
    <li><img src="images/jiping (2).jpg" alt="第二张图片" /></li>
    <li><img src="images/jiping (3).jpg" alt="第三张图片" /></li>
</ul>

<script type="text/javascript">
	$("li img").mouseover(function(e){
		var div="<div id='tip'></div>" //创建div
		$("body").append(div);			//添加div
		var img="<img src='"+this.src+"' />";	//创建图片
		var mytitle=this.alt;				//设置标题
		$("div#tip").append(img).append(mytitle);	//插入图片和标题到div后面
		
		$("div#tip").css({ 		//设置div的属性
			"top":+e.pageY+"px"		//设置top
			,"left":+e.pageX+"px"	//设定left
		}).find("img").css({	//设置div里面img属性
			"width":"400px"			//设置宽度
			,"height":+"300px"		//设置高度
		}).end().show();			//返回到div然后显示
	}).mouseout(function(){		
		$("div#tip").remove();		//删除div	
	}).mousemove(function(e){		//鼠标移动事件
		$("div#tip").css({
			"top":+e.pageY+"px"	
			,"left":+e.pageX+"px"
		});
	});
</script>
</body>
</html>

效果图