JavaScript图片悬停功能（悬停位置，不随滚动）

最新推荐文章于 2024-05-17 13:52:13 发布

空维YYDS

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量619

点赞数

分类专栏： HTML+JavaScript 文章标签： javascript xhtml html

本文链接：https://blog.csdn.net/qq_39263716/article/details/124883030

版权

HTML+JavaScript 专栏收录该内容

7 篇文章 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">
body{ height:2000px; width:2000px;}
#main_div{height:130px; width:130px; position:absolute; left:50px; top:30px; z-index:2;}
#imgDiv img{ border:1px dashed #303; float:left;}
#closeDiv{ position:absolute; z-index:2; margin-left:80px;}

</style>

<script type="text/javascript">
//var closeDiv;
var mainDiv;
var mainTop;
var mainLeft;

//滚动条加载：document.documentElement.scrollTop) 代表滚动的上边距离
window.οnscrοll=function(){
   mainDiv.style.top = mainTop+parseInt(document.documentElement.scrollTop)+"px";
   mainDiv.style.left = mainLeft+parseInt(document.documentElement.scrollLeft)+"px";
   };
</script>
</head>