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

使用jQuery对图片进行居中设置的更多相关文章

  1. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  2. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  3. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  4. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  5. JQuery获取与设置HTML元素的值value

    JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...

  6. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  7. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  8. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  9. jquery ajax 超时设置

    自:jquery ajax超时设置 var ajaxTimeoutTest = $.ajax({ url:'',  //请求的URL timeout : 1000, //超时时间设置,单位毫秒 typ ...

随机推荐

  1. HTTP数据包详解

     无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解,内容较多,希望大家耐心看. 阅读目录 ...

  2. 【剑指Offer】39、平衡二叉树

      题目描述:   输入一棵二叉树,判断该二叉树是否是平衡二叉树.这里的定义是:如果某二叉树中任意结点的左.右子树的深度相差不超过1,那么它就是一棵平衡二叉树.   解题思路:   首先对于本题我们要 ...

  3. 单个图片获取-爬取网易"数读"信息数据(暴涨的房租，正在摧毁中国年轻人的生活)

    参考链接:https://www.makcyun.top/web_scraping_withpython3.html 该网页其实有16张图片,但是因为页面数据中某处多个空白,导致参考链接中的方式只有1 ...

  4. Centos7.5虚拟机无法ping通网关、外网IP地址

    问题:前两天Centos7.5虚拟机关机,第二天重启后使用Xshell发现无法连接虚拟机,经检测发现虚拟机无法ping通192.168.1.1.无法ping通192.168.1.118(客户机)和ww ...

  5. Hexo系列(五) 撰写文章

    在利用 Hexo 框架搭建一个属于我们自己的博客网站后,下面我们就来谈谈怎样在网站上书写我们的第一篇博客吧 一.创建文章 在站点文件夹中打开 git bash,输入如下命令创建文章,其中 title ...

  6. 关于bitnami redmine 的一些问题

    http://blog.csdn.net/yanyaming920817/article/details/50059523

  7. 洛谷 P1535 游荡的奶牛

    P1535 游荡的奶牛 题目描述 Searching for the very best grass, the cows are travelling about the pasture which ...

  8. 使用大白菜U盘进入PE后再次重启电脑会留后门的清理方法

    使用大白菜U盘进入PE后再次重启电脑会留后门,这个后门主要是自动下载安装一些软件,比如金山毒霸等. 清除方法: 1.每次用完PE重启前,清理以下地方: ①c:\Windows\xxxxx.exe(查看 ...

  9. Linux文件查找命令find（转）

    Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录 ...

  10. 【STL容器学习】-关联容器与map的用法

    STL提供了4个关联容器:set.multiset.map和multimap.这些容器提供了通过keyword高速存储和訪问数据元素的能力.Set和map不同意有反复keyword,而multiset ...