<!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. pycharm主题 变量颜色 自定义

    File--Settings--Edtior--Color Schame-- Lanuage Defaults

  2. 视频及MP3 播放浅析 Jplayer参数详细

    初识jplayer插件是因为它的兼容性是最好的,可以兼容到IE6,官网上对它兼容性有很详细的说明 这个是我选择使用它的首要原因. 现在从需求上来了解它的使用方法吧.第一个需求:MP3格式的音频在网页播 ...

  3. POJ3253 Fence Repair【贪心】

    我们的小伙伴Bingo真的很调皮,他在上课的路上看到树上有个鸟窝,他就想去把他捅下来,但是鸟窝很高他够不到,于是他就到处找木棍,想把这些木棍接在一起,然后去捅鸟窝.他一共找了N跟木棍 (1 ≤ N ≤ ...

  4. 洛谷P1012 拼数【字符串+排序】

    设有nn个正整数(n≤20)(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3n=3时,33个整数1313,312312,343343联接成的最大整数为:3433121334331 ...

  5. [bzoj1860 ZJOI2006] 超级麻将 (线性dp)

    传送门 Description Input 第一行一个整数N(N<=100),表示玩了N次超级麻将. 接下来N行,每行100个数a1..a100,描述每次玩牌手中各种牌的数量.ai表示数字为i的 ...

  6. matplotlib的annotate用法小结

    这个是matplotlib自定义的annotate方法的文本: 一. def annotate(self, s, xy, *args, **kwargs): a = mtext.Annotation( ...

  7. EurekaLog是什么鬼？

    D的all工程文件打开后,莫名其妙就处于等待打开状态.因为最后一次调整是安装了RO9.0.所以一直怀疑是RO的原因.再加上win7授权问题,安装RO一直不顺当.所以折腾的时间最多. 其他把RO全部卸载 ...

  8. 洛谷 P1129 BZOJ 1059 cogs 660 [ZJOI2007]矩阵游戏

    题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作: 行交 ...

  9. qsort快速排序

    C库函数qsort七种使用方法示例 七种qsort排序方法<本文中排序都是采用的从小到大排序> 一.对int类型数组排序C++ / C 代码 int num[100]; Sample: i ...

  10. IOS - 查找未使用的图片

    实现细节都在代码里面, 帮助 -h. # -*- coding: utf-8 -*- """ 检查IOS应用图片是否使用 1. 读取有效文件: 图片(.png, .jpg ...