无论窗口如何变化,图片的中间部分一直位于浏览器中

由于开发需要,为了能够在各个设备中都能保持一个不错的效果,而设计师给的slider图片大部分仅中间有图片,而图片的长度都是2500px,二两边基本都是纯色。在手机设备上浏览时你就会发现,如果我们将图片的宽度设置为100%,那么图片就是缩放得非常小,以致于无法看清中间部分的图片。因此,就需要在窗口变化的过程中,让图片的中间部分一直处于浏览器可见范围内。
刚开始我使用了@media来进行实现,也就是说直接设置图片的宽度为固定的,而图片外面有一个容器,此容器宽度为100%,并且将图片超出部分所隐藏。这样一来,那么我就可以通过margin-left属性设置为负值,即可移动图片中心部位到相应的地方。但是这个方法确实不行,因为你得写很多不同px的设备。很麻烦,而且经常有各种bug,难以解决。最终我选择了jQuery。

1、需求分析

首先监听窗口的宽度,当宽度小于多少的时候,我们再去设置margin-left的值。
而margin-left的值又要该如何计算?
因为我们需要当窗口宽度小于我们所设置的图片宽度时才进行执行margin-left,因此,假如你设置了image的宽度为1200px,那么我们需要使用下面的计算方式:
1200-当前窗口的宽度=被窗口隐藏的图片宽度
这个仅仅是得到了呗窗口隐藏的右边部分图片的宽度,我们再将其除以2之后也就是,被窗口隐藏的图片宽度的一半,这就得到了我们该向左边margin多少。最终得到的计算方式应该如下:
margin-left:-(image_width - window_width)/2
image_width图片的宽度,window_width即当前窗口的宽度
由于需要向左边移动,所以margin-left的值应该是负值。

2、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .slider{
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            border-bottom: 4px #000 solid;
            height: 585px;
        }
        .slideContainer{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        img{
            width: 100%;
        }
        @media sceen and (max-width: 460px){
            .slider{
                height: 400px;
            }
            .slideContainer{
                width: 1000;
            }
            img.slide{
                margin-left: -730px;
            }
        }      
    </style>
</head>
<body>
    <div class="slider">
        <div class="slideContainer">
            <img class="slide" style="display: inline;" /* 自己设定下图片地址 */>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
        $(window).resize(function(){
                var w = $(window).width();
                var m = $('.slideContainer').width();
                if(w<1200){
                    $('.slideContainer').css('margin-left',-(m-w)/2);
                }else{
                    $('.slideContainer').css('margin-left','');
                }
               
            })
})
   
</script>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注