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

随机推荐

SqlServer表属性查询
获得表信息: select syscolumns.name as field, syscolumns.isnullable as nullis, systypes.name as sqltype, s ...
AngularJs练习Demo10 ngInclude
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
使用hibernate优化
a. 在查询字符串中,应该总是使用jdbc的占位符?,或使用使用命名参数:,不要自查询中使用字符串值来代替非常量值. b. Flush会影响性能,频繁刷新影响性能,尽量减少不必要的刷新. c ...
7 RandomAccessFile读取文件内容保存--简单例子（需要验证）
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.io.*; /** * 读取动态产生的文件内容 */ publ ...
ESP8266固件修改可以控制多个IO方法
之前在论坛上找到了一个通过ESP8266可以控制GPIO0的固件和app,但是自己做的家庭影音灯光系统是需要控制多个IO从而控制STM32.通过观看大明的视频,了解了GPIO的控制方法. 在固件的ap ...
CI框架uri去掉index.php
CI框架的入口是index.php,所以url实际上要多出一个index.php,非常不美观.我使用的是apache服务器,要开启mod_rewrite服务才可以. sudo a2enmod rewr ...
一个超级简单php的留言板
第一步:配置好测试环境:(详细略了) 第二部:新建一个数据库,命名为guestbook(名字可以随便改),可以直接在phpmyadmin里面操作,在数据库里面新建一张表‘content’,表里面有4个 ...
xen之基本搭建
1. 前言所需包: kernel-xen xen xen-libs (xen依赖包) xen_runtime (xen依赖包) 以上xen包需要版本号一致,例如4.1.3版本,这里使用xm接口管理工 ...
R教程计划
提起数据挖掘,似乎会有很多人望而却步,从生产规划到到规律分析,从生物医学到航天科技,到处都有数据挖掘工程师留下的影子. 通过对比SAS,SPSS,以及R,最终选定了R, 不为什么,免费且高效才是硬道理 ...
hdu 1317 XYZZY
http://acm.hdu.edu.cn/showproblem.php?pid=1317 #include <cstdio> #include <queue> #inclu ...

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

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

随机推荐

热门专题