<!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>
javascript 实例:跟随鼠标移动(大图展示)
最新推荐文章于 2024-05-06 04:24:45 发布