您的位置：首页 > 其它

跟随鼠标移动浮动显示大图展示的特效

2012-03-15 15:00 267 查看

<!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(http://js.fgm.cc/learn/lesson5/img/loading.gif) 50% 50% no-repeat;}

</style>

<script type="text/javascript">

window.onload = function ()

{

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 oImg = document.createElement("img");

//图片预加载

var img = new Image();

img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");

//插入大图片

oBig.appendChild(oImg);

//鼠标移过样式

this.className = "active";

//显示big

oBig.style.display = oLoading.style.display = "block";

//判断大图是否加载成功

img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";})

};

//鼠标移动, 大图容器跟随鼠标移动

aLi[i].onmousemove = function (event)

{

var event = event || window.event;

var iWidth = document.documentElement.offsetWidth - event.clientX;

//设置big的top值

oBig.style.top = event.clientY + 20 + "px";

//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.

oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

};

//鼠标离开, 删除大图并隐藏大图容器

aLi[i].onmouseout = function ()

{

this.className = "";

oBig.style.display = "none";

//移除大图片

oBig.removeChild(oBig.lastChild)

}

}

};

</script>

</head>

<body>

<div id="box">

<ul>

<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_1.jpg" /></li>

<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_2.jpg" /></li>

<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_3.jpg" /></li>

<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_4.jpg" /></li>

</ul>

</div>

<div id="big"><div></div></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航