国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端實(shí)例練習(xí) - 圖片覆蓋層

Freeman / 2374人閱讀

摘要：圖片覆蓋層代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。

圖片覆蓋層

代碼儲(chǔ)存在Github
效果預(yù)覽

初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，“如何入門前端？”
同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 “入門級(jí)” 的教材并不太滿意。學(xué)習(xí)一門新知識(shí)，實(shí)例是尤其重要的。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。愿能為大家提供一些幫助。
希望能夠與大家互相分享，共同進(jìn)步。

效果預(yù)覽

HTML 部分 
    
圖片覆蓋層


    

    

      Avatar
      

        
Hello World
CSS 部分 
#mySelect {
  font-size: 16px;
  text-align: center;
}

.container {
  position: relative;
  width: 30%;
}

.image {
  display: block;
  width: 100%;
}

.overlayFadeIn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlayFadeIn {
  opacity: 1;
}

.overlaySlideInTop {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlaySlideInTop {
  bottom: 0;
  height: 100%;
}

.overlaySlideInBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlaySlideInBottom {
  height: 100%;
}

.overlaySlideInRight {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlaySlideInRight {
  width: 100%;
  left: 0;
}

.overlaySlideInLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlaySlideInLeft {
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
JavaScript 部分

這部分代碼只為展示方便而用，不需考慮。

(function() {
    var mySelect = document.getElementById("mySelect");
        overlay = document.getElementById("overlay");

    mySelect.onchange = function(e) {
        overlay.className = e.target.value;
    }
})();

好啦，現(xiàn)在所有的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這里，只是給大家提供一種思路，參考。
具體的實(shí)現(xiàn)，每個(gè)人都可以有不同的方法。
請(qǐng)大家趕快發(fā)揮想象，把你最想實(shí)現(xiàn)的功能，在電腦敲出來(lái)吧！

參考自w3cschools

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111748.html

相關(guān)文章

  • 前端實(shí)例練習(xí) - 圖片覆蓋層

    摘要：圖片覆蓋層代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 圖片覆蓋層 代碼儲(chǔ)存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的...

    meteor199 評(píng)論0 收藏0

  • 前端實(shí)例練習(xí) - 圖片覆蓋層

    摘要：圖片覆蓋層代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 圖片覆蓋層 代碼儲(chǔ)存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的...

    feng409 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

    摘要：任務(wù)五一個(gè)最常見的移動(dòng)端頁(yè)面完成的事情學(xué)習(xí)張?chǎng)涡袷澜缦嚓P(guān)章節(jié)張?chǎng)涡裣盗辛私馔ㄅ浞x擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計(jì)劃的事情找時(shí)間把前面任務(wù)的官方提供鏈接過一遍，查缺 任務(wù)五、 一個(gè)最常見的移動(dòng)端頁(yè)面 完成的事情 float學(xué)習(xí) 張?chǎng)涡瘛禖SS世界》相關(guān)章節(jié) 張?chǎng)涡?float系列 了解CSS通配符 &...

    Jonathan Shieber 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)3-簡(jiǎn)單界面

    摘要：任務(wù)三一個(gè)最簡(jiǎn)單的移動(dòng)端頁(yè)面今天完成的事情運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡(jiǎn)單并繼續(xù)學(xué)習(xí)優(yōu)化讓布局更好適應(yīng)屏幕變化使用了盒模型及百分比了解區(qū)別在中應(yīng)用圖片處理學(xué)習(xí)明天計(jì)劃的事情深度思考手機(jī)分辨率和網(wǎng)頁(yè)的區(qū)別周末補(bǔ)學(xué)任務(wù)四計(jì)劃及簡(jiǎn)單編寫遇 任務(wù)三、 一個(gè)最簡(jiǎn)單的移動(dòng)端頁(yè)面 今天完成的事情 運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡(jiǎn)單Demo并繼續(xù)學(xué)習(xí)優(yōu)化. 讓布局更好適應(yīng)屏幕變化(使用...

    MrZONT 評(píng)論0 收藏0

  • 前端實(shí)例練習(xí) - 模態(tài)圖

    摘要：模態(tài)圖代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 模態(tài)圖 代碼儲(chǔ)存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的教材并不...

    Turbo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Freeman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<