JQuery浮动层的实现

最新推荐文章于 2020-05-21 13:11:28 发布

qubernet

最新推荐文章于 2020-05-21 13:11:28 发布

阅读量155

点赞数

分类专栏：前端 jQuery 文章标签：浮动层

本文链接：https://blog.csdn.net/qubernet/article/details/82920702

版权

前端同时被 2 个专栏收录

103 篇文章 0 订阅

订阅专栏

jQuery

28 篇文章 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>
    <title></title>
    <style type="text/css">
        #test
        {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 430px;
            height: 300px;
            background: #EEF2FB;
            color: Black;
            font-size: 13px;
            margin-top: 50px;
            left: 50%;
            margin: 0px 0 0 -215px;
            text-align: center;
            font-size: 16px;
            border: 1px dotted green;
        }
    </style>
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var menuYloc = $("#test").offset().top;
            var menuXloc = $("#test").offset().right;
            $(window).scroll(function () {
                var offsetTop = menuYloc + $(window).scrollTop() + "px";
                $("#test").animate({
                    top: offsetTop
                }, {
                    duration: 600, queue: false
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <div id="test">
            我就是悬浮的DIV区域<br />
            兼容：Test ie6+,firefox3.0</div>
    </div>
    <div style="height: 5000px;">
    </div>
</body>
</html>

qubernet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery浮动层的实现

<!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> <t...
复制链接

扫一扫