HTML CSS 實現鼠標懸停時圖片拉近效果

chnmagnus 發布于2019-08-29 12:58 / 2842人閱讀

摘要：之前在很多網頁上看到了鼠標滑過一個圖片鏈接時圖片放大拉近的效果，今天嘗試實現一下。使用實現思路設置以圖片作為元素的背景，鼠標滑過的時候通過屬性放大圖片。

前言

為了讓網頁的使用體驗更好，我們會讓網頁的某些元素對鼠標的動作做出響應。例如鼠標滑過、單擊按鈕的時候按鈕變色、變形。之前在很多網頁上看到了鼠標滑過一個圖片鏈接時圖片放大、拉近的效果，今天嘗試實現一下。

1. 使用background實現

思路：設置以圖片作為div元素的背景，鼠標滑過div的時候通過background屬性放大圖片。





  
  background實現圖片拉近效果

2. 使用img元素的width height屬性實現

思路：當鼠標滑過圖片時，修改img元素的width和height屬性放大圖片




  
  img圖片拉近效果

3. 使用transform放大圖片





  
  transform實現圖片拉近效果

4. 使用transform和transition來放大圖片

以上的3種實現方式中，圖片放大過程幾乎都是瞬間完成的，感覺不流暢，視覺體驗也不好。同transition可以設置放大過程經歷的時間，從而有流暢的感覺。

  
  
  
      
          
        transform、transform實現圖片拉近

上面這種方式，圖片放大過程是流暢的，但是縮小過程很生硬，可以改進一下。

  
  
  
      
          
        transform、transform 圖片拉近 優化

后語

實驗的時候發現很多知識有點模糊了，該補習了。

在線DEMO https://hgy9473.github.io/myl...

云服務器 GPU云服務器鼠標懸停事件html html鼠標懸停下拉 html 圖片拉近鼠標懸停

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112270.html

HTML CSS 實現鼠標懸停時圖片拉近效果

摘要：之前在很多網頁上看到了鼠標滑過一個圖片鏈接時圖片放大拉近的效果，今天嘗試實現一下。使用實現思路設置以圖片作為元素的背景，鼠標滑過的時候通過屬性放大圖片。前言為了讓網頁的使用體驗更好，我們會讓網頁的某些元素對鼠標的動作做出響應。例如鼠標滑過、單擊按鈕的時候按鈕變色、變形。之前在很多網頁上看到了鼠標滑過一個圖片鏈接時圖片放大、拉近的效果，今天嘗試實現一下。 1. 使用backgroun...

2450184176 2019-08-01 17:11 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

ThreeWords 2019-08-20 18:01 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

szysky 2019-08-29 12:56 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

weknow619 2019-08-01 17:09 評論0 收藏0
讀后總結--精通css高級web標準解決方案（第二版）

摘要：無論是否移動，元素仍然占據原來的空間。絕對定位絕對定位使元素的位置與文檔流無關，因此不占據空間。為啥讀這本書現在前端圈子過于浮躁，掌握基礎無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘當然，根本原因還是覺得自己掌握不好開始總結吧~ 一. 基礎知識經過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...

leone 2019-08-30 13:05 評論0 收藏0