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

阿山發表於2023-03-17
本文首發於公眾號: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;
  }

相關文章