使用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 ...
随机推荐
- [置顶]
我的 Java 后端书架 (2016 年暖冬版)
转自: http://calvin1978.blogcn.com/articles/bookshelf16.html 我的 Java 后端书架 (2016 年暖冬版) 本书架主要针对 Java 后端 ...
- 数据类型 scanf标准函数 sizeof关键字 二进制（day03）
字符类型的名称是char 字符类型里包含256个不同的整数,每个 整数对应一个字符(例如'a', '^'等) 这些整数和字符完全可以互相替代 ASCII码表列出所有整数和字符的对应关系 ASCII码表 ...
- POJ3617 Best Cow Line【贪心】
Description 给定长度为n的字符串S,要构造一个长度为n的字符串T.起初,T是空串,随后反复进行下列任意操作: 1.从S的头部删除一个字符,加到T的尾部 2.从S的尾部删除一个字符,加 ...
- Oracle 解决表死锁
select 'alter system kill session ''' || SID || ',' || SERIAL# || ''';' from ( select distinct a.sid ...
- CentOS7下安装docker(Docker系列1)
CentOS7下安装docker 系统要求 为了安装docker,需要准备 64-bit的CentOS 7 删除非官方的Docker包 yum的仓库中有一个很旧的Docker包, 现在Docker官方 ...
- rmq的st算法模板题 nyoj 119
士兵杀敌(三) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比 ...
- 歌乐电子一道非常easy的笔试题目居然搞错了！！！
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjI0NzQ2Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- rar x 解压rar文件，提示permission denied
问题: 解压rar文件,提示
- iOS 隐藏NavigationBar的方法
使用下面方法: - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [self.navigationCon ...
- Java编程：切面条
/* 一根高筋拉面,中间切一刀,能够得到2根面条. 假设先对折1次.中间切一刀.能够得到3根面条. 假设连续对折2次,中间切一刀.能够得到5根面条. 那么.连续对折10次.中间切一刀.会得到多少面条呢 ...