欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-29 10:55:24
...

才学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>


效果图

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

代码生疏,仅供参考,欢迎评论留言