首页 > WEB前端 > jQuery > 正文


jQuery控制图片水平垂直居中方法

02-12 22:57:06   来源:admin   评论: 点击:

1、jquery取得图片大小
1、jquery取得图片大小

 



<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
   var img = new Image();
   img.onload = function() {
        alert(this.width + 'x' + this.height);
   }
   img.src = $("#myimg").attr('src');

</script>


    style="width:120px;height:200px;"/>
  

2、jquery控制图片垂直水平居中

 




<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
   //取得窗口宽度跟高度
  var winWidth=$(document).width();
  var winHeight=$(document).height();
  console.log(winWidth+","+winHeight);
  //构造图片对象,用来封装图片,只有通过它才能取得图片的原始宽、高
  var img = new Image();
  img.src=$("img")[0].src;
  console.log(img);
  img.onload = function() {
       //alert(this.width + 'x' + this.height);
       var imgWidth=this.width;
       var imgHeight=this.height;
       console.log(imgWidth+","+imgHeight);
      //这里的120、140是设置的标记宽高(通过的属性width,height或style设置的宽高),不是图片的实际宽、高
      var posX=Math.max(0,(winWidth-120)/2);
      var posY=Math.max(0,(winHeight-140)/2);
      
//这里假设的宽高使用百分比:width="50%" height="50%",那么计算使用下面的方法
      //var posX=Math.max(0,(winWidth-winWidth*0.5)/2);
      //var posY=Math.max(0,(winHeight-winHeight*0.5)/2);
      console.log(posX+","+posY);
      $("img").attr("style","position:absolute;left:"+posX+"px;top:"+posY+"px;");
   }

 });
</script>


  

 

 

 

3、纯Javascript的垂直水平居中

 

     

          
          
          
          <script>
               function setmiddle(){
                    var broswer_height=document.body.clientHeight;//网页工作区的高
                    var broswer_width=document.body.clientWidth;//网页工作区的宽
                    var picture=document.getElementsByTagName("img")[0];
                    var img_width=picture.width;//图片高
                    var img_height=picture.height;//图片宽
                    position_height=Math.max(0,(broswer_height-img_height)/2);//图像顶边距
                    position_width=Math.max(0,(broswer_width-img_width)/2);//图像左边距
                    picture.style.marginLeft=position_width;
                    picture.style.marginTop=position_height;
               }

               
          </script>
     
     
          
     

 

相关热词搜索:jquery center

上一篇:如何使用jQuery的ajax实现滚动条滚动到l浏览器底部自动加载 下一篇:使用jQuery快速解决input中placeholder值在ie中无法支持的问题
分享到: 收藏