您的位置:澳门新葡8455最新网站 > Web前端 > 商品体现特效

商品体现特效

发布时间:2019-11-14 16:55编辑:Web前端浏览(130)

    聊聊 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, 最终呈现的是尺寸比较小的那个。

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

    图片 1

    上面的五个例子的代码:

    <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;
    }

    效果图:

    图片 2

    例如:替换元素相对于左下角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;
    }

    效果图:

    图片 3

    当然,你也可以使用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);
    }

    效果图:

    图片 4

    它还支持负数:

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

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

    效果图:

    图片 5

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

    兼容性:点这里

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

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

    打赏作者

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

    图片 6

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

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

    图片 27

    展示图

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

    任选一种支付方式

    图片 28 图片 29

    1 赞 收藏 评论

    二、内置对象document

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

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

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

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

    关于作者:TGCode

    图片 30

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

    图片 31

    CSS1Compat:标准兼容模式开启

    • 浏览器宽度:document.documentElement.clientWidth

    • BackCompat 对应 quirks mode(怪异模式) , CSS1Compat 对应 strict mode (严格模式) :

    早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。

    三、scroll家族

    3.1 基本概念

    • 网页正文全文宽: document.body.scrollWidth;

    • 网页正文全文高: document.body.scrollHeight;

    • 网页被卷去的高: document.body.scrollTop;

    • 网页被卷去的左: document.body.scrollLeft;

    • 在实际开发中使用比较多的就是scrollTop,如下图:

    图片 32

    3.2 处理scroll家族浏览器适配问题

    ie9+ 和 最新浏览器

    window.pageXOffset; (scrollLeft)
    window.pageYOffset; (scrollTop)

    - **Firefox浏览器 和 其他浏览器**
    `document.documentElement.scrollTop;`
    
    - **Chrome浏览器 和 没有声明 DTD <DOCTYPE >**
    `document.body.scrollTop;`
    
    - **兼容写法**
    >var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
    
    ###3.3 scrollTo(x,y)
    - 把内容滚动到指定的坐标
    
    - `格式:scrollTo(xpos,ypos)`
     - - xpos 必需;要在窗口文档显示区左上角显示的文档的 x 坐标;
    
     - - ypos 必需;要在窗口文档显示区左上角显示的文档的 y 坐标 。
    
    - 网页大部分都没有水平滚动条,所以,这个x 不太常用。
    
    ##四、什么是Json?
    >[JSON](http://baike.baidu.com/view/136475.htm)([JavaScript](http://baike.baidu.com/view/16168.htm) Object Notation) 是一种轻量级的数据交换格式。它基于[ECMAScript](http://baike.baidu.com/view/810176.htm)的一个子集。相比于XML,json易于人阅读和编写,同时也易于机器解析和生成,目前数据传递基本上都使用json。
    
    -  JSON有两种结构:对象 和 数组,两种结构相互组合从而形成各种复杂的数据结构。
    
    - -数据在键值对中
    
    -  数据由逗号分隔
    
    - 花括号保存对象
    
    - 方括号保存数组
    

    { id: '100000', text: '廊坊银行总行', children: [

    {
    id: '110000',
    text: '廊坊分行',
    children: [
    {
    id: '113000',
    text: '廊坊银行开发区支行',
    leaf: true
    },
    {
    id: '112000',
    text: '廊坊银行解放道支行',
    children: [
    {
    id: '112200',
    text: '廊坊银行三大街支行',
    leaf: true
    },
    {
    id: '112100',
    text: '廊坊银行广阳道支行',
    leaf: true
    }
    ]
    },
    {
    id: '111000',
    text: '廊坊银行金光道支行',
    leaf: true
    }
    ]
    }
    ] }

     - http://c.m.163.com/nc/article/BVEGO8UT05299OU6/full.html
    ##五、实现瀑布流滚动
    
    ![示例图](http://upload-images.jianshu.io/upload_images/1333977-3ccf3288fde30684.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

    HTML结构

    <link rel="stylesheet" href="css/index.css">
    <div id="main">
    <div class="box"><div class="pic"><img src="images/0.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/11.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/12.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/13.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/14.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/15.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/16.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/17.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/18.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/19.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/20.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/21.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/22.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/23.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/24.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/25.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/26.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/27.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/28.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/29.jpg" alt=""></div></div>
    </div>
    <script src="js/MyFunc.js"></script>
    <script src="js/index.js"></script>

    CSS样式

    *{
    margin: 0;
    padding: 0;
    }

    img{
    vertical-align: top;
    }

    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)
    

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:商品体现特效

    关键词: