那些不用js也能實現的效果

本文首發於公眾號：GitWeb，歡迎關注，接收首發推文

本文列舉幾個不需要使用js也能實現的效果

一、頁面回到頂部

回到頂部是頁面開發中很常見的一個功能，一般的做法是對回到頂部元件做一個監聽，當使用者點選的時候，設定body的scrollTop為0。今天發現一種更加簡單的方式，不需要用到js也能實現。就是透過連結的href來做

  <a href="#">回到頂部</a>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>

像程式碼中這樣，當點選這個連結的時候，頁面會自動回到頂部，但是這種回到頂部是瞬間完成的，我們需要一個滾動的過程。所以我們需要對整個頁面做一個平滑滾動的樣式。設定html的scroll-behavior為smooth

html{
    scroll-behavior: smooth;
  }

二、文字多行截斷可（展開）收起

1.實現這個多行截斷比較簡單，就是藉助line-clamp這個屬性就可以，再配合這個webkit-box-orient屬性，就可以實現這種三行截斷

 .clamp{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  <p class="clamp">
      慶曆四年春，滕子京謫守巴陵郡。越明年，政通人和，百廢具興，乃重修岳陽樓，增其舊制，刻唐賢今人詩賦於其上，屬予作文以記之。
      予觀夫巴陵勝狀，在洞庭一湖。銜遠山，吞長江，浩浩湯湯，橫無際涯，朝暉夕陰，氣象萬千，此則岳陽樓之大觀也，前人之述備矣。
      然則北通巫峽，南極瀟湘，遷客騷人，多會於此，覽物之情，得無異乎？若夫淫雨霏霏，連月不開，陰風怒號，濁浪排空，日星隱曜，
      山嶽潛形，商旅不行，檣傾楫摧，薄暮冥冥，虎嘯猿啼。登斯樓也，則有去國懷鄉，憂讒畏譏，滿目蕭然，感極而悲者矣。至若春和景明，
      波瀾不驚，上下天光，一碧萬頃，沙鷗翔集，錦鱗游泳，岸芷汀蘭，郁郁青青。而或長煙一空，皓月千里，浮光躍金，靜影沉璧，漁歌互答，
      此樂何極！登斯樓也，則有心曠神怡，寵辱偕忘，把酒臨風，其喜洋洋者矣。嗟夫！予嘗求古仁人之心，或異二者之為，何哉？不以物喜，不以己悲，
      居廟堂之高則憂其民，處江湖之遠則憂其君。是進亦憂，退亦憂。然則何時而樂耶？其必曰“先天下之憂而憂，後天下之樂而樂”乎！噫！微斯人，
      吾誰與歸？時六年九月十五日。
  </p>

2.藉助checkbox和label來實現按鈕（展開）收起

  .btn::after{
    content: '展開';
  }
  #state:checked + .btn::after{
    content: '收起';
  }
  #state{
    position: absolute;
    left: -999999px;
  }
  #state:checked ~ p{
    -webkit-line-clamp: 100;
  }
  <input type="checkbox" name="" id="state">
  <label for="state" class="btn"></label>

三、圖片對齊不變形

這種高度不同的圖片很容易破壞頁面的佈局，這個時候如果給它一個高度，圖片會被拉伸變形非常醜

這時候可以用object-fit屬性，給它一個cover選項，確保圖片按原始寬高比例進行縮放，超出容器的部分會被裁切掉。和它配合的還有一個object-position屬性，它可以指定圖片顯示的位置，結合滑鼠移動+過渡動畫

img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: left top;
    transition: 1s;
  }
  img:hover{
    object-position: right bottom;
  }

那些不用js也能實現的效果

相關文章