鼠标停靠首先是把小图放大定位如何实现？

pooyer 2012-09-26 03:00:22

鼠标停靠首先是把小图放大

http://cn.fotolia.com/search?k=car

这个网站的鼠标停靠图片变大

鼠标停靠首先是把小图放大然后去加载大图然后填充。

谁能给一个demo 或者扒下来JS

求高手指点一二！

...全文

114 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

artwl_cn 2012-09-26

打赏
举报

写了个简单的DEMO，样式你自己改一下：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8"/>

	<title>Demo</title>

	<style type="text/css">

		body,ul,li{

			margin:0;

			padding:0;

		}

		#layer{

			position:absolute;

			border:1px solid #CCC;

			padding:10px;

			border-radius:5px;

			z-index:2;

			background:#FFF;

			display:none;

		}

		#test img{

			margin:20px;

			width:80px;

		}

		#test img:hover{

			cursor:pointer;

		}

	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

</head>

<body>

	<div id="test">

		<ul>

			<li><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" bigSrc="http://csdnimg.cn/www/images/csdnindex_logo.gif" alt=""/></li>

			<li><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" bigSrc="http://csdnimg.cn/www/images/csdnindex_logo.gif" alt=""/></li>

			<li><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" bigSrc="http://csdnimg.cn/www/images/csdnindex_logo.gif" alt=""/></li>

		</ul>

	</div>

	<div id="layer"><img id="bigImg" src="" alt=""/></div>

	<script>

		var imgs = document.getElementById("test").getElementsByTagName("img"),

			layer = document.getElementById("layer"),

			bigImg = document.getElementById("bigImg");

		for(var i=0,j=imgs.length;i<j;i++){

			imgs[i].onmousemove=function(e){

				e = e || window.event;

				var pageX=0,

					pageY=0;

				if(navigator.userAgent.match(/msie/i)){

					pageX = e.clientX + document.body.scrollLeft;

					pageY = e.clientY + document.body.scrollTop;

				} else {

					pageX = e.pageX;

					pageY = e.pageY;

				}

				layer.style.left = (pageX + 20 ) +"px";

				layer.style.top = (pageY + 20) + "px";

				layer.style.display="block";

				bigImg.src=this.getAttribute("bigSrc");

			}

			imgs[i].onmouseout=function(){

				layer.style.display="none";

			}

		}

	</script>

</body>

</html>