跟随鼠标移动放大图片

最新推荐文章于 2022-04-24 10:03:05 发布

c18247162441

最新推荐文章于 2022-04-24 10:03:05 发布

阅读量556

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/c18247162441/article/details/43377983

web前端专栏收录该内容

8 篇文章

订阅专栏

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