jquery 图片比例不变,全屏居中
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>图片中心点全屏缩放代码</title>
<script type="text/javascript" src="http://i1.sinaimg.cn/jslib/jquery-1.4.2.min.js"></script>
<style>
body {padding:0; margin:0;}
#coverpage{ width: 100%; height: 100%; z-index: 9999; background: #000; overflow: hidden; position: absolute;}
#onepics{ width: 100%; height: 100%; overflow: hidden; position: relative;}
.onepic_wrap{ width: 100%; height: 100%; overflow: hidden; display: block; position: relative; cursor: pointer;} .onepic_bg{ position: absolute; left: 0; bottom: 0; height: 45px;width: 100%;color:#fff;background:rgba(0,0,0, 0.5); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7f000000', EndColorStr='#7f000000');*zoom:1;}
:root .onepic_bg{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }
.onepic_bg p{ height: 45px; line-height: 45px; padding-left: 95px; font-size: 13px; color: #fff; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} </style>
</head>
<body>
<!-- cover begin -->
<div id="coverpage">
<div id="onepics"><div class="onepic_wrap"><img src="data:images/header.png" class="wrap_pic"></div></div>
<!-- 文字介绍 start -->
<div class="onepic_bg">
<p id="onepic_sum">居民被迫撤离,主要州际高速路关闭。摄影:Darvi</p>
</div>
<!-- 文字介绍 end -->
</div> <script type="text/javascript">
var win_height; //浏览器当前窗口可视区域高度
var win_width; //浏览器当前窗口可视区域宽度
var original_width = 2100; //图片原始尺寸,编辑可手填
var original_height = 1000; //图片原始尺寸,编辑可手填 var pic_width, pic_height, pic_left ,pic_top; //裁剪适配后的图片显示尺寸和左边距、上边距 OnePicAction(); function OnePicAction(){
win_height = $(window).height(); //浏览器当前窗口可视区域高度
win_width = $(window).width(); //浏览器当前窗口可视区域宽度 //裁剪图片
if(Math.ceil(win_height * original_width / original_height) < win_width ){
pic_width = win_width ;
pic_height = Math.ceil(win_width * original_height / original_width);
pic_left = 0;
pic_top = - Math.ceil((pic_height - win_height) / 2);
}else{
pic_height = win_height;
pic_width = Math.ceil(win_height * original_width / original_height);
pic_left = - Math.ceil((pic_width - win_width) / 2);
pic_top = 0;
}
$("#onepics .wrap_pic").css("width",pic_width+"px").css("height",pic_height+"px").css("margin-top",pic_top+"px").css("margin-left",pic_left+"px"); }
//浏览器大小变化时壹图处理
window.onresize = function(){
OnePicAction();
}
</script>
</body>
<html>
jquery我单独拿出来吧
<script type="text/javascript">
var win_height; //浏览器当前窗口可视区域高度
var win_width; //浏览器当前窗口可视区域宽度
var original_width = 2100; //图片原始尺寸,编辑可手填
var original_height = 1000; //图片原始尺寸,编辑可手填 var pic_width, pic_height, pic_left ,pic_top; //裁剪适配后的图片显示尺寸和左边距、上边距 OnePicAction(); function OnePicAction(){
win_height = $(window).height(); //浏览器当前窗口可视区域高度
win_width = $(window).width(); //浏览器当前窗口可视区域宽度 //裁剪图片
if(Math.ceil(win_height * original_width / original_height) < win_width ){
pic_width = win_width ;
pic_height = Math.ceil(win_width * original_height / original_width);
pic_left = 0;
pic_top = - Math.ceil((pic_height - win_height) / 2);
}else{
pic_height = win_height;
pic_width = Math.ceil(win_height * original_width / original_height);
pic_left = - Math.ceil((pic_width - win_width) / 2);
pic_top = 0;
}
$("#onepics .wrap_pic").css("width",pic_width+"px").css("height",pic_height+"px").css("margin-top",pic_top+"px").css("margin-left",pic_left+"px"); }
//浏览器大小变化时壹图处理
window.onresize = function(){
OnePicAction();
}
</script>
最后是我自己写的,有类似,但是判断条件有不同,还有,如果自己没定原始参数,而是通过js获取图片宽度,就可能出现问题,图片只是按比例显示,但是不全屏
<script>
function fullScreen(pic,p_w,p_h){
var f_w,f_h;//全屏图片尺寸
var w_h = $(window).height();
var w_w = $(window).width();
var $this = $(pic);
// var p_w = $this.width();//这个没用????????????????
// var p_h =$this.height();
if(p_w < p_h){//如果图片高度大于宽度
f_w = w_w;
f_h = Math.ceil(p_h / p_w * w_h);
f_ml = 0;
f_mt = -(f_h-w_h)/2;
$this.css({'width':f_w+'px','height':f_h+'px','margin-top':f_mt+'px','margin-left':f_ml+'px'})
}else{ //宽度大于高度
f_h = w_h;//因为图片宽度比高度值大,所以就以屏幕的高度为基准,屏幕的宽度就是图片的高度
f_w = Math.ceil(p_w / p_h * f_h);//p_w/p_h就是图片的宽高比例,当确定了图片的高度的时候,就可以通过宽高比例来确定全屏后的图片宽度
f_mt = 0;//图片的上边距
f_ml = -(f_w-w_w)/2;//图片全屏后的宽度超过屏幕的宽度除以2,就是所需往左偏移的距离
$this.css({'width':f_w+'px','height':f_h+'px','margin-top':f_mt+'px','margin-left':f_ml+'px'})
} }
fullScreen('#onepics .wrap_pic',1920,760);
window.onresize = function(){
fullScreen('#onepics .wrap_pic ') }
</script>
jquery 图片比例不变,全屏居中的更多相关文章
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- 使用CSS3实现响应式标题全屏居中和站点前端性能
要实现标题全屏居中(同一时候在垂直和水平方向居中).有若干种方法,包含使用弹性布局.表格单元.绝对定位和自己主动外边距等. 全屏居中 当中眼下比較流行也比較easy理解的方法是使用绝对定位+偏移实现. ...
- MyEclipse9中的不伤眼修改、FreeMarker插件、JQuery提示插件、全屏(FullScreen)插件的安装
============下载相关附件===================== http://files.cnblogs.com/fhtwins/eclipse-fullscreen_1.0.7.zi ...
- jQuery支持mobile的全屏水平横向翻页效果
这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...
- 设置ImageView显示的图片铺满全屏
转自:http://m.blog.csdn.net/blog/wjwj1203/32334459 为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...
- jquery动态背景切换全屏登录插件supersized.js
下载地址:https://download.csdn.net/download/t101lian/10434198预览: http://www.daimabiji.com/codedemo/1530 ...
- IOS中实现图片点击全屏预览
//// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...
随机推荐
- 解决 innerHTML 在 IE6-IE9中不能赋值的bug
在MSDN可以了解跟多,关于innerHTML的介绍,但是在这里只要是解决表格部分问题 MSDN上有这样的记录: When using innerHTML to insert script, you ...
- WebApi2官网学习记录---单元测试
如果没有对应的web api模板,首先使用nuget进行安装 例子1: ProductController 是以硬编码的方式使用StoreAppContext类的实例,可以使用依赖注入模式,在外部指定 ...
- Silverlight Visifire控件应用去水印
版本几之前可以用属性直接去掉水印: chart.Watermark = false; 现在我用的会报错,已过时,在网上查了写资料,解决办法如下: 一.很多人都是利用摭罩的办法,定位到水印显示的地方,建 ...
- C#中的表达式树的浅解
表达式树可以说是Linq的核心之一,为什么是Linq的核心之一呢?因为表达式树使得c#不再是仅仅能编译成IL,我们可以通过c#生成一个表达式树,将结果作为一个中间格式,在将其转换成目标平台上的本机语言 ...
- hdu find the safest road
算法:多源最短路(floyd) 题意:每条通路有一个安全系数,求始点到终点的最大的安全系数并输出,如果没有输出What a pity! c++超时啊 Problem Description XX星球有 ...
- MySQL指令记录(Wampserve环境)
1.MySQL在Wampserve中的默认用户名为'root',默认密码为空: 2.显示所有数据库 show databases; 3.切换数据库 use DATABASE_NAME; 4.列出所有表 ...
- Python标准库内置函数——hasattr
hasattr(object, name): # object 对象 name 特征名称 判断对象object是否包含名为name的特性(hasattr是通过调用getattr(ojbect, nam ...
- C#串口扫描
1.传入serialport 和待显示串口的Commbox private void Search_AddSerialToComboBox(SerialPort MyPort, ComboBox My ...
- ibatis 更改resultmap后 java.sql.SQLException: Column 'del_status' not found.
当在resultmap中增加字段后,查询语句也必须增加相应字段,否则会报错, java.sql.SQLException: Column 'del_status' not found. 因为查询结果与 ...
- tableView点击后取消选中效果
[self.tableView deselectRowAtIndexPath:[self.tableView indexPathForSelectedRow] animated:YES]; @impo ...