您的位置：首页 > 其它

跟随鼠标移动放大图片

2015-02-01 22:42 369 查看

<!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">

#big{position:absolute;width:330px;height:280px;border:2px solid #ddd;left:500px;display:none; }

.img-demo cite { background: #333; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; color: #fff; position: absolute; bottom: 0; left: 0; width: 330px; padding: 10px 0; border-top: 1px solid #999; }

</style>

<script type="text/javascript">

window.onload = function ()

{

var aLi = document.getElementsByName("cc");

var oBig = document.getElementById("big");

var i = 0;

for (i = 0; i < aLi.length; i++)

{

//鼠标划过, 预加载图片插入容器并显示

aLi[i].onmouseover = function ()

{

   oBig.style.display ="block";

};

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

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 ()

{

   oBig.style.display = "none";

}

}

};

</script>

</head>

<body>

<div class="img-demo" id="big">

   <img src="http://js.fgm.cc/learn/lesson5/img/shirt_1.jpg" style="width:100%; height:100%"/>

   <cite>Today is a greet day! 2008-12-16</cite>

</div>

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

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航