澳门在线威尼斯官方 > 威尼斯澳门在线 > 威尼斯澳门在线:物品显示特效

原标题:威尼斯澳门在线:物品显示特效

浏览次数:184 时间:2019-10-06

聊聊 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家族

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:威尼斯澳门在线:物品显示特效

关键词:

上一篇:远程分页类,Components构建单页面应用

下一篇:没有了