使用jQuery对图片进行居中设置

最新推荐文章于 2021-06-03 17:08:20 发布

weixin_30408309

最新推荐文章于 2021-06-03 17:08:20 发布

阅读量528

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lsy0403/p/5902132.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 4000px;
            width: 4000px;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
     //当页面加载的时候
        $(window).load(function () {
            //获取页面的宽度
            var pageWidth = $(window).width();
            //获取页面的高度
            var pageHeight = $(window).height();

            //获取图片的宽度
            var picWidth = $("img").width();
            //获取图片的高度
            var picHeight = $("img").height();

            //计算top值
            //  页面的高度的一半 - 图片高度的一半
            var top = (pageHeight-picHeight)/2;
            //计算left值
            //  页面宽度的一半 - 图片宽度的一半
            var left = (pageWidth-picWidth)/2;

            //设置图片的位置
            $("img").offset({
                "top":top,
                "left":left
            });
            $(document).scroll(function(){
               var scrollleft=$(this).scrollLeft();
                var scrolltop=$(this).scrollTop();
                $("img").offset({
                    "top":top+scrolltop,
                    "left":left+scrollleft

                })
            });

//            $(document).scroll(function () {
//                var scrollTop = $(this).scrollTop();
//                var scroolLeft = $(this).scrollLeft();
//
//                $("img").offset({
//                    "top":top+scrollTop,
//                    "left":left+scroolLeft
//                });
//            });
        })
    </script>
</head>
<body>
<img src="01.jpg" alt="" width="200">
</body>
</html>

转载于:https://www.cnblogs.com/lsy0403/p/5902132.html

weixin_30408309

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery对图片进行居中设置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 4000px; ...
复制链接

扫一扫