侧边悬浮框

最新推荐文章于 2022-02-17 17:35:18 发布

zhaoke_930325

最新推荐文章于 2022-02-17 17:35:18 发布

阅读量892

点赞数

分类专栏：笔记实例文章标签： javascript

本文链接：https://blog.csdn.net/zhaoke_930325/article/details/75675297

版权

笔记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

实例

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右侧悬浮框2</title>
    <style type="text/css">
    #img1{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: red;
            right:0;
            bottom:0;       
        }
    </style>
    <script type="text/javascript" src='move2.js'></script>
    <script type="text/javascript">
    window.onscroll=function()
    {
        var oImg = document.getElementById('img1');
        var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
        startMove(oImg,{top:parseInt((document.documentElement.clientHeight-oImg.offsetHeight)/2)+scrollTop});
    };
    </script>
</head>
<body style="height: 2000px;">

    <img src="images/baby.jpg" id="img1">

</body>
</html>

1.var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;针对三种不同的浏览器来选择scrollTop这个值，分别为ie，Safari，FF和chrome。
2.document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

zhaoke_930325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
侧边悬浮框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右侧悬浮框2</title> <style type="text/css"> #img1{ width: 200px; height: 200px; posi
复制链接

扫一扫