使用jQuery对图片进行居中设置
<!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对图片进行居中设置的更多相关文章
- JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- Css元素居中设置
你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- jquery Jquery 遍历 获取设置 效果
speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...
- jquery ajax 超时设置
自:jquery ajax超时设置 var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 typ ...
随机推荐
- Math工具类的使用
1.包:java.lang 不需要导包 2.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 特点: 该类中的方法都是静态方法,所以可以直接使用类名.方法名(实参)调 ...
- Python实现ATM+购物商城
需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还,按欠 ...
- Linux—Ubuntu14.0.5安装mongo
1.安装mongo sudo apt-get install mongo 2.如果遇到找不到安装包运行,那就更新资源列表 sudo apt-get update 3.安装成功会自动运行mongo pg ...
- linux中php项目无法发送邮件:PEAR mail package is not installed
发送邮件报错误:PEAR mail package is not installed的原因是linux中缺少PEAR mail组件, PEAR mail组件也就是PHP Pear Mail / SMT ...
- 批量重命名B站下载文件
将B站下载的文件统一修改文件名 事情来由 事情是这样的,我在B站上发现一个教程,看了一下,非常不错,于是想下载下来(免得B站和谐). 问题就是这样来了,我手机没多少内存,下载后下发现文件在手机中都是以 ...
- 【微软2017年预科生计划在线编程笔试第二场 A】Queen Attack
[题目链接]:http://hihocoder.com/problemset/problem/1497 [题意] 给你n个皇后; 然后问你其中能够互相攻击到的皇后的对数; 皇后的攻击可以穿透; [题解 ...
- 2-SAT·hihoCoder音乐节
2-SAT·hihoCoder音乐节 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 hihoCoder音乐节由hihoCoder赞助商大力主办,邀请了众多嘉宾和知名乐队 ...
- 敏捷迭代:Sprint燃尽图的7个图形特征及说明的问题
本文写于很多年前(2006),并在很多地方被引用.而现在,笔者对于Sprint燃尽图的理解有了戏剧性的变化--在看到很多团队滥用它之后.笔者不再建议团队做Sprint燃尽图,因为它们不仅不会增加多少有 ...
- 【ACM】nyoj_139_我排第几个_201308062046
我排第几个时间限制:1000 ms | 内存限制:65535 KB 难度:3描述 现在有"abcdefghijkl”12个字符,将其所有的排列中按字典序排列,给出任意一种排列,说出这个排 ...
- pl/sql developer 布局结构保存
pl/sql developer 布局结构保存 调整了工具栏,调整了窗体框位置,点击 窗口->保存版面 就可以保留当前的调整的结果,不用一次一次调整了: 也可以在工具 -> 首选项 -&g ...