关于作者:TGCode

图片 1

路途虽远,无所畏
个人主页
·
我的文章
·
9
·
   

图片 2

三、scroll家族

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 3
图片 4

1 赞 收藏
评论

二、内置对象document

  • Document 对象是 Window 对象的一部分,可通过 window.document
    属性对其进行访问

  • Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:

document.head(获取头部)
document.body(获取身体)
document.title (获取标题)
document.documentElement(获取整个html)

  • Document.compatMode:
    BackCompat:标准兼容模式关闭
  • 浏览器宽度:document.body.clientWidth

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS ·
CSS3

本文作者: 伯乐在线
TGCode
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

这两个奇葩的属性是做什么的呢?其实它们是为了处理替换元素(replaced
elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

等等,好像多了一个名词,啥叫替换元素?替换元素其实是:

  • 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
  • CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

这个当然不是我头脑风暴来的,而是引用别人的解释:引用

常见的替换元素有<video>、<object>、<img>、<input
type=”image”>、<svg>、<svg:image>和<svg:video>等。

要是看的稀里糊涂的也没关系,接着往下看,我相信你会懂得!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill
    默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。
  • contain
    包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。
  • cover
    覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。
  • none : 保持可替换元素原尺寸和比例。
  • scale-down : 等比缩小。就好像依次设置了none或contain,
    最终呈现的是尺寸比较小的那个。

不好意思,我又要摆妹子来诱惑你们了,看效果图:

图片 5

上面的五个例子的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px
10px; width:150px; height:150px; } .box>img{ width:100%; height:100%;
background-color:#000; } .fill{ object-fit:fill; } .contain{
object-fit:contain; } .cover{ object-fit:cover; } .none{
object-fit:none; } .scale{ object-fit:scale-down; } </style>
<div class=”box”> <img src=”example-girl.jpg” class=”fill”
alt=””> </div> <div class=”box”> <img
src=”example-girl.jpg” class=”contain” alt=””> </div> <div
class=”box”> <img src=”example-girl.jpg” class=”cover” alt=””>
</div> <div class=”box”> <img src=”example-girl.jpg”
class=”none” alt=””> </div> <div class=”box”> <img
src=”example-girl.jpg” class=”scale” alt=””> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

看到这些效果,我想同志们最关心的的应该是兼容性,点这里点这里

2、object-position

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法:

object-position: <position>

1
object-position: <position>

默认值是50% 50%,也就是居中效果,其取值和CSS中background-position属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3
Background
》)

例如:替换元素位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

图片 6

例如:替换元素相对于左下角10px 10px地方定位

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

图片 7

当然,你也可以使用calc()来定位:

img{   object-fit: contain;   object-position: calc(100% – 10px)
calc(100% – 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% – 10px) calc(100% – 10px);
}

效果图:

图片 8

它还支持负数:

img{   object-fit: contain;   object-position: -10px calc(100% – 10px);
}

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% – 10px);
}

效果图:

图片 9

总之,object-position的特性表现与backgound-position一样一样的。

兼容性:点这里

到这里,这两个属性算是讲完了,就是这么简单。

打赏支持我写出更多好文章,谢谢!


打赏作者

main{

/*用于子盒子定位*/
position: relative;

}

.box{
float: left;
padding: 15px 0 0 15px;
/background-color: red;/
}

.pic{
padding: 10px;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
}

.pic img{
width: 165px;
}

JS特效

/**

  • Created by Administrator on 2016/12/29.
    /
    /
    *

  • 当页面加载完毕
    */
    window.onload = function(){
    // 1. 实现瀑布流布局
    waterFall(‘main’, ‘box’);
    // 2. 滚动加载盒子
    window.onscroll = function(){
    // 2.1 判断是否具备加载新盒子的条件
    if(checkWillLoadNewBox()){ // 加载新的盒子
    // 2.2 造数据
    var dataArr = [
    {src: ’19.jpg’},
    {src: ’32.jpg’},
    {src: ‘7.jpg’},
    {src: ‘9.jpg’},
    {src: ’13.jpg’},
    {src: ’15.jpg’},
    {src: ’17.jpg’},
    {src: ’19.jpg’}
    ];

         // 2.3 根据数据创建新的盒子
         for(var i=0; i<dataArr.length; i++){
             var newBox = document.createElement('div');
             newBox.className = 'box';
             $('main').appendChild(newBox);
    
             var newPic = document.createElement('div');
             newPic.className = 'pic';
             newBox.appendChild(newPic);
    
             var newImg = document.createElement('img');
             newImg.src = 'images/'+ dataArr[i].src;
             newPic.appendChild(newImg);
         }
    
         // 2.4 实现瀑布流布局
         waterFall('main', 'box');
     }
    

    }
    };

/**

  • 实现瀑布流布局

  • @param parent 父元素id

  • @param child 子元素class
    */
    function waterFall(parent, child){
    // —- 父盒子居中 —
    // 1. 拿到所有的盒子
    var allBox = $(parent).getElementsByClassName(child);
    // 2. 求出其中一个盒子的宽度
    var boxWidth = allBox[0].offsetWidth;
    // 3. 求出屏幕的宽度
    var clientW = document.documentElement.clientWidth ||
    document.body.clientWidth;
    // 4. 求出列数
    var cols = parseInt(clientW / boxWidth);
    // 5.让父盒子居中
    $(parent).style.width = cols * boxWidth + ‘px’;
    $(parent).style.margin = ‘0 auto’;

    // —- 子盒子的定位 —
    var heightArr = [];
    // 1.遍历所有的盒子
    for(var i=0; i<allBox.length; i++){
    // 1.1 拿到所有盒子的高度
    var boxHeight = allBox[i].offsetHeight;
    // 1.2 把第一行盒子的高度放入数组
    if(i < cols){
    heightArr.push(boxHeight);
    }else { // 剩余的盒子
    var minBoxHeight = Math.min.apply(null, heightArr);
    var minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
    // 子盒子定位
    allBox[i].style.position = ‘absolute’;
    allBox[i].style.left = minBoxIndex * boxWidth + ‘px’;
    allBox[i].style.top = minBoxHeight + ‘px’;
    // 更新高度
    heightArr[minBoxIndex] += boxHeight;
    }
    }
    }

/**

  • 获取最小索引
  • @param arr 数组
  • @param val 元素
    */
    function getMinBoxIndex(arr, val){
    for(var i=0; i<arr.length; i++){
    if(arr[i] == val) return i;
    }
    }

/**

  • 判断是否符合加载条件
    /
    function checkWillLoadNewBox(){
    // 1. 获取最后一个盒子
    var allBox = $(‘main’).getElementsByClassName(‘box’);
    var lastBox = allBox[allBox.length – 1];
    // 2. 求出最后一个盒子高度的一半 + offsetTop
    var lastBoxDis = lastBox.offsetHeight \
    0.5 + lastBox.offsetTop;
    // 3. 求出屏幕的高度
    var clientH = document.documentElement.clientHeight ||
    document.body.clientHeight;
    // 4. 求出滚动的高度
    var scrollTop = scroll().top;
    /console.log(lastBoxDis, clientH, scrollTop);\/
    // 5. 判断返回
    return clientH + scrollTop >= lastBoxDis;
    }

MyFunc.js

/**

  • Created by Administrator on 2016/12/29.
    /
    /
    *
  • 获取滚动的头部 和 左侧 偏离位置
  • @returns {头部, 左边}
  • scroll().top scroll().left
    */
    function scroll(){
    if(window.pageXOffset != null){ // ie9+ 和 最新浏览器
    return {
    top: window.pageYOffset,
    left: window.pageXOffset
    }
    }else if(document.compatMode == ‘CSS1Compat’){ // 遵循W3C
    return {
    top: document.documentElement.scrollTop,
    left: document.documentElement.scrollLeft
    }
    }
    return {
    top: document.body.scrollTop,
    left: document.body.scrollLeft
    }
    }

/**

  • 根据id快速获取标签
  • @param id
  • @returns {Element}
    */
    function $(id){
    return document.getElementById(id);
    }

![瀑布流特效](http://upload-images.jianshu.io/upload_images/1333977-81da10d6ea9beedc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一、水平滚动条 和 垂直滚动条

图片 10

1.1 核心技术点
1)求滚动条的长度? 2)拖动滚动条,求内容要走多少?
滚动条的长度取决于滚动内容(滚动内容越长,滚动条越短);
内容滚动的距离和滚动条走的距离是成倍数关系。
1.2 换算公式
获取滚动条的长度:
滚动条的长度 / 盒子的长度 = 盒子的长度 / 内容的长度**
滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度**
拖动滚动条,求内容走的长度:
内容走的距离 / 滚动条走的距离 =(内容的长度 – 盒子的长度) / (盒子长度

  • 滚动条的长度)**
    内容走的距离 = (内容的长度 – 盒子的长度) / (盒子长度 – 滚动条的长度)
    * 滚动条走的距离
HTML结构
<div id="box">
         <ul id="box_content">
             <li><img src="images/img1.jpg" alt="图片 11"></li>
             <li><img src="images/img2.jpg" alt="图片 12"></li>
             <li><img src="images/img3.jpg" alt="图片 13"></li>
             <li><img src="images/img4.jpg" alt="图片 14"></li>
             <li><img src="images/img5.jpg" alt="图片 15"></li>
             <li><img src="images/img6.jpg" alt="图片 16"></li>
             <li><img src="images/img7.jpg" alt="图片 17"></li>
             <li><img src="images/img8.jpg" alt="图片 18"></li>
             <li><img src="images/img1.jpg" alt="图片 19"></li>
             <li><img src="images/img2.jpg" alt="图片 20"></li>
             <li><img src="images/img1.jpg" alt="图片 21"></li>
             <li><img src="images/img2.jpg" alt="图片 22"></li>
             <li><img src="images/img3.jpg" alt="图片 23"></li>
             <li><img src="images/img4.jpg" alt="图片 24"></li>
             <li><img src="images/img5.jpg" alt="图片 25"></li>
             <li><img src="images/img6.jpg" alt="图片 26"></li>
             <li><img src="images/img7.jpg" alt="图片 27"></li>
             <li><img src="images/img8.jpg" alt="图片 28"></li>
             <li><img src="images/img1.jpg" alt="图片 29"></li>
             <li><img src="images/img2.jpg" alt="图片 30"></li>
         </ul>
         <div id="box_bottom">

         </div>
     </div>

CSS样式
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        #box{
            width: 900px;
            height: 180px;
            border: 1px solid #ccc;
            margin: 100px auto;

            position: relative;
            overflow: hidden;
        }

        #box_content{
           width: 2600px;
           height: 130px;
           position: absolute;
           top:10px;
           left:0;
        }

        #box_content li{
            float: left;
        }

        #box_bottom{
            width: 100%;
            height: 25px;
            background-color: #cccccc;

            position: absolute;
            left: 0;
            bottom: 0;
        }

        #progress{
            width: 100%;
            height: 100%;
            background-color: orangered;
            border-radius: 15px;

            position: absolute;
            cursor: pointer;
        }
    </style>

JS特效
<script>
    window.onload = function(){
        // 1. 获取需要的标签
        var box = document.getElementById('box');
        var box_content = document.getElementById('box_content');
        var box_bottom = document.getElementById('box_bottom');
        var progress = document.getElementById('progress');

        // 2. 设置滚动条的长度
        // 滚动条长度 = ( 盒子的宽度 / 滚动内容的宽度) * 盒子的宽度
        var pLength = (box.offsetWidth / box_content.offsetWidth) * box.offsetWidth;
        progress.style.width = pLength + 'px';

        // 3.监听按下事件
        progress.onmousedown = function(event){
            var event = event || window.event;

            // 3.1 获取起始位置
            var startX = event.clientX - progress.offsetLeft;

            // 3.2 移动事件
            document.onmousemove = function(event){
                var event = event || window.event;
                var endX =  event.clientX - startX;

                // 碰撞检测
                if(endX < 0){
                    endX = 0;
                }else if(endX >= box.offsetWidth - progress.offsetWidth){
                    endX = box.offsetWidth - progress.offsetWidth;
                }

                // 3.3 赋值
                progress.style.left = endX + 'px';

                // 3.4 内容走起来
                // 内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离
                var c_length = (box_content.offsetWidth - box.offsetWidth) /(box.offsetWidth - progress.offsetWidth) * endX;
                box_content.style.left = -c_length + 'px';

                return false;
            };

            // 3.5 松开鼠标
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };

            return false;
        }
    }
</script>

图片 31

展示图

网站地图xml地图