javascript 实例：跟随鼠标移动（大图展示）

最新推荐文章于 2022-07-02 08:30:00 发布

小烟

最新推荐文章于 2022-07-02 08:30:00 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ebw123/article/details/8452836

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>
<style type="text/css">
html,body{overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
#box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;}
#box li{float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;}
#box li.active{border:1px solid #a10000;}
#box li img{width:170px;height:170px;vertical-align:top;}
#big{position:absolute;width:400px;height:400px;border:2px solid #ddd;display:none;}
#big div{position:absolute;top:0;left:0;width:400px;height:400px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(loading.gif) 50% 50% no-repeat;}
</style>

</head>
<body>
<div id="box">
    <ul>
    	<li><img src="shirt_1.jpg" /></li>
        <li><img src="shirt_2.jpg" /></li>
        <li><img src="shirt_3.jpg" /></li>
        <li><img src="shirt_4.jpg" /></li>
    </ul>
</div>
<div id="big"><div></div></div>


<script type="text/javascript">
	var aLi = document.getElementsByTagName("li");
	var oBig = document.getElementById("big");
	var oLoading = oBig.getElementsByTagName("div")[0];
	var i = 0;
	for(i=0;i<aLi.length;i++) {
	    aLi[i].index = i;
		//鼠标移入
		aLi[i].onmouseover = function() {
		    var img = new Image();  //new img对象
			img.src =  aLi[this.index].getElementsByTagName('img')[0].src.replace('.jpg','_big.jpg');  //给对象添加图片
			oBig.appendChild(img);    //插入到盒子里面
			this.className = "active";
			oBig.style.display = oLoading.style.display = "block";  //默认图片隐藏
			//判断大图是否加载成功
		   img.complete  ? oLoading.style.display = "none" : (img.onload = function() {oLoading.style.display = "none";});
		}
		//鼠标移动
		aLi[i].onmousemove = function(evt) {
		    	var evt = evt || window.event;
				//获取页面总宽度 - 当前鼠标位置 剩下的宽度
				var iWidth = document.documentElement.offsetWidth - evt.clientX;	
				oBig.style.top = evt.clientY + 20 + "px";
			   //设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
			   //图片的左边距离：   如果鼠标右边的宽度小于 图片宽度+10的话  那么就用当前的坐标-去图片宽度 -10  否则 就当前的坐标 +10
			  oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? evt.clientX - oBig.offsetWidth - 10 : evt.clientX + 10) + "px";
			
		}
		
		//鼠标离开
		aLi[i].onmouseout = function() {
		   this.className = "";
		   oBig.style.display = "none";
		   //移除大图
		   oBig.removeChild(oBig.lastChild);
		}
		
		
		
	}









</script>

</body>
</html>

小烟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript 实例：跟随鼠标移动（大图展示）

跟随鼠标移动（大图展示）html,body{overflow:hidden;}body,div,ul,li{margin:0;padding:0;}#box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;}#box li{float:left;width:170px;height:170px;curso
复制链接

扫一扫

专栏目录