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

資訊專欄INFORMATION COLUMN

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

2450184176 / 790人閱讀

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

前言

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

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...

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

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

相關文章

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

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

    chnmagnus 評論0 收藏0

  • 那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

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

    ThreeWords 評論0 收藏0

  • 那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

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

    szysky 評論0 收藏0

  • 那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

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

    weknow619 評論0 收藏0

  • 讀后總結--精通css高級web標準解決方案（第二版）

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

    leone 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<