HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片拉近效果

2450184176 發(fā)布于2019-08-01 17:11 / 813人閱讀

摘要：之前在很多網(wǎng)頁(yè)上看到了鼠標(biāo)滑過(guò)一個(gè)圖片鏈接時(shí)圖片放大拉近的效果，今天嘗試實(shí)現(xiàn)一下。使用實(shí)現(xiàn)思路設(shè)置以圖片作為元素的背景，鼠標(biāo)滑過(guò)的時(shí)候通過(guò)屬性放大圖片。

前言

為了讓網(wǎng)頁(yè)的使用體驗(yàn)更好，我們會(huì)讓網(wǎng)頁(yè)的某些元素對(duì)鼠標(biāo)的動(dòng)作做出響應(yīng)。例如鼠標(biāo)滑過(guò)、單擊按鈕的時(shí)候按鈕變色、變形。之前在很多網(wǎng)頁(yè)上看到了鼠標(biāo)滑過(guò)一個(gè)圖片鏈接時(shí)圖片放大、拉近的效果，今天嘗試實(shí)現(xiàn)一下。

1. 使用background實(shí)現(xiàn)

思路：設(shè)置以圖片作為div元素的背景，鼠標(biāo)滑過(guò)div的時(shí)候通過(guò)background屬性放大圖片。





  
  background實(shí)現(xiàn)圖片拉近效果

2. 使用img元素的width height屬性實(shí)現(xiàn)

思路：當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，修改img元素的width和height屬性放大圖片




  
  img圖片拉近效果

3. 使用transform放大圖片





  
  transform實(shí)現(xiàn)圖片拉近效果

4. 使用transform和transition來(lái)放大圖片

以上的3種實(shí)現(xiàn)方式中，圖片放大過(guò)程幾乎都是瞬間完成的，感覺(jué)不流暢，視覺(jué)體驗(yàn)也不好。同transition可以設(shè)置放大過(guò)程經(jīng)歷的時(shí)間，從而有流暢的感覺(jué)。

  
  
  
      
          
        transform、transform實(shí)現(xiàn)圖片拉近

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

  
  
  
      
          
        transform、transform 圖片拉近 優(yōu)化

后語(yǔ)

實(shí)驗(yàn)的時(shí)候發(fā)現(xiàn)很多知識(shí)有點(diǎn)模糊了，該補(bǔ)習(xí)了。

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

GPU云服務(wù)器云服務(wù)器鼠標(biāo)懸停事件html html鼠標(biāo)懸停下拉 html 圖片拉近鼠標(biāo)懸停

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

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

相關(guān)文章

HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片拉近效果

摘要：之前在很多網(wǎng)頁(yè)上看到了鼠標(biāo)滑過(guò)一個(gè)圖片鏈接時(shí)圖片放大拉近的效果，今天嘗試實(shí)現(xiàn)一下。使用實(shí)現(xiàn)思路設(shè)置以圖片作為元素的背景，鼠標(biāo)滑過(guò)的時(shí)候通過(guò)屬性放大圖片。前言為了讓網(wǎng)頁(yè)的使用體驗(yàn)更好，我們會(huì)讓網(wǎng)頁(yè)的某些元素對(duì)鼠標(biāo)的動(dòng)作做出響應(yīng)。例如鼠標(biāo)滑過(guò)、單擊按鈕的時(shí)候按鈕變色、變形。之前在很多網(wǎng)頁(yè)上看到了鼠標(biāo)滑過(guò)一個(gè)圖片鏈接時(shí)圖片放大、拉近的效果，今天嘗試實(shí)現(xiàn)一下。 1. 使用backgroun...

chnmagnus 2019-08-29 12:58 評(píng)論0 收藏0
那是我夕陽(yáng)下的奔跑，電商網(wǎng)站PC端詳情頁(yè)圖片放大效果實(shí)現(xiàn)

摘要：使用鼠標(biāo)的坐標(biāo)值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標(biāo)離開(kāi)的監(jiān)聽(tīng)事件，當(dāng)鼠標(biāo)離開(kāi)商品大圖時(shí)隱藏遮罩層以及放大鏡。在詳情頁(yè)瀏覽時(shí)商品大圖還是不能完全看清楚商品的細(xì)節(jié)，該特效實(shí)現(xiàn)鼠標(biāo)懸停在商品大圖上時(shí)，在商品大圖右側(cè)出現(xiàn)放大鏡效果并根據(jù)鼠標(biāo)的位置來(lái)改變右側(cè)大圖的顯示內(nèi)容，放大鏡中的內(nèi)容和鼠標(biāo)懸停位置的內(nèi)容相同。該特效的實(shí)現(xiàn)效果圖為：showImg(https://...

ThreeWords 2019-08-20 18:01 評(píng)論0 收藏0
那是我夕陽(yáng)下的奔跑，電商網(wǎng)站PC端詳情頁(yè)圖片放大效果實(shí)現(xiàn)

摘要：使用鼠標(biāo)的坐標(biāo)值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標(biāo)離開(kāi)的監(jiān)聽(tīng)事件，當(dāng)鼠標(biāo)離開(kāi)商品大圖時(shí)隱藏遮罩層以及放大鏡。在詳情頁(yè)瀏覽時(shí)商品大圖還是不能完全看清楚商品的細(xì)節(jié)，該特效實(shí)現(xiàn)鼠標(biāo)懸停在商品大圖上時(shí)，在商品大圖右側(cè)出現(xiàn)放大鏡效果并根據(jù)鼠標(biāo)的位置來(lái)改變右側(cè)大圖的顯示內(nèi)容，放大鏡中的內(nèi)容和鼠標(biāo)懸停位置的內(nèi)容相同。該特效的實(shí)現(xiàn)效果圖為：showImg(https://...

szysky 2019-08-29 12:56 評(píng)論0 收藏0
那是我夕陽(yáng)下的奔跑，電商網(wǎng)站PC端詳情頁(yè)圖片放大效果實(shí)現(xiàn)

摘要：使用鼠標(biāo)的坐標(biāo)值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標(biāo)離開(kāi)的監(jiān)聽(tīng)事件，當(dāng)鼠標(biāo)離開(kāi)商品大圖時(shí)隱藏遮罩層以及放大鏡。在詳情頁(yè)瀏覽時(shí)商品大圖還是不能完全看清楚商品的細(xì)節(jié)，該特效實(shí)現(xiàn)鼠標(biāo)懸停在商品大圖上時(shí)，在商品大圖右側(cè)出現(xiàn)放大鏡效果并根據(jù)鼠標(biāo)的位置來(lái)改變右側(cè)大圖的顯示內(nèi)容，放大鏡中的內(nèi)容和鼠標(biāo)懸停位置的內(nèi)容相同。該特效的實(shí)現(xiàn)效果圖為：showImg(https://...

weknow619 2019-08-01 17:09 評(píng)論0 收藏0
讀后總結(jié)--精通css高級(jí)web標(biāo)準(zhǔn)解決方案（第二版）

摘要：無(wú)論是否移動(dòng)，元素仍然占據(jù)原來(lái)的空間。絕對(duì)定位絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。為啥讀這本書(shū) 現(xiàn)在前端圈子過(guò)于浮躁，掌握基礎(chǔ)無(wú)疑比掌握一個(gè)js框架重要 css怎么都能寫(xiě)出來(lái)，但是要寫(xiě)的好寫(xiě)得快還得多讀書(shū) css魔法推薦的，讀完這個(gè)讀讀css揭秘當(dāng)然，根本原因還是覺(jué)得自己掌握不好開(kāi)始總結(jié)吧~ 一. 基礎(chǔ)知識(shí) 經(jīng)過(guò)上世紀(jì)沒(méi)有 css的痛苦時(shí)的混沌時(shí)期，人們開(kāi)始了進(jìn)...

leone 2019-08-30 13:05 評(píng)論0 收藏0