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

随机推荐

table细线
table { border-collapse: collapse; } table td { border: 1px solid #CCCCCC; }
tips[Android]
View:2D graphics,SurfaceView:3D graphics. ProgressBar进度渐进动画,可以使用ObjectAnimator实现.动画相关的类: android.vie ...
oracle中简单查询语句的格式及执行顺序分析
一条简单的查询sql格式如下: SELECT ... FROM .... [WHERE ...] --过滤单行 [GROUP BY ... [HAVING ...]]--GROUP BY对前面wh ...
Light oj 1030 二分查找
1088 - Points in Segments PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...
nyoj 素数环
算法:搜索描述有一个整数n,把从1到n的数字无重复的排列成环,且使每相邻两个数(包括首尾)的和都为素数,称为素数环. 为了简便起见,我们规定每个素数环都从1开始.例如,下图就是6的一个素数环. 输 ...
C语言中的静态局部变量
代码: 0x601070 0x7ffcf44243fc 0x60106c 0x60106c 0x60106c [hu@localhost test]$ cat test.cpp #include &l ...
Fedora下YouCompleteMe配置
需要在默认的.ycm_extra_conf.py 中添加(C++的路径可能需要根据版本号修改) '-isystem', '/usr/include', '-isystem', '/usr/includ ...
C++格式化字符函数
格式化有很多种方法,啊,1,sprintf函数可以实现格式化字符串,并保存到一个字符数组2,snprintf也能实现但比起sprintf函数稍微要安全一些了啊3,ostringstream对象也能实现 ...
php中的MVC模式运用
[size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉 ...
命运（HDU 2571 简单动态规划）
命运 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

jquery 图片比例不变，全屏居中

jquery 图片比例不变，全屏居中的更多相关文章

随机推荐

热门专题