亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例

 更新時(shí)間:2018年05月04日 11:52:34   作者:Wayne-Zhu  
這篇文章主要介紹了JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果,結(jié)合實(shí)例形式分析了javascript與css3響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁面元素屬性實(shí)現(xiàn)圖片放大效果相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果。分享給大家供大家參考,具體如下:

今天看網(wǎng)易的網(wǎng)站上,當(dāng)我把鼠標(biāo)放上去的時(shí)候發(fā)現(xiàn)圖片放大,移開圖片縮小,于是自行嘗試,結(jié)果如下。

方法一:使用js和css3

效果如圖:

這樣的實(shí)現(xiàn)非常簡單,就是利用js的mouseovermouseout事件,但是不知道如何使圖片從中間放大,日后再行嘗試吧,代碼如下:

<!DOCTYPE html>
<html>
<head>
  <title>網(wǎng)易圖片動(dòng)畫</title>
  <style>
    div.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
    }
    @keyframes bigger {
      from {width: 100%;height: 100%;}
      to {width: 110%; height: 110%;}
    }
    @keyframes smaller {
      from {width: 110%;height: 110%;}
      to {width: 100%; height: 100%;}
    }
  </style>
</head>
<body>
  <div class="img">
    <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
  </div>
  <script>
    var img = document.querySelector("img");
    img.onmouseover = function () {
      img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
    }
    img.onmouseout = function () {
      img.style.cssText = "animation: smaller 2s";
    }
  </script>
</body>
</html>

方法二:使用css3方法

css3的確給我們帶來了很多好處,是我們處理問題更加方便。 這里使用 transform:scale();即可實(shí)現(xiàn),但是這個(gè)要結(jié)合hover來使用,并且設(shè)置好transition的時(shí)長才有更好的效果,話不多說效果如下:

這個(gè)效果是不是好了很多呢,可以看到它自身就是從中心開始擴(kuò)大的。
但是只要我們添加transform-origin屬性就可以很好地控制變化的中心點(diǎn)了,如:

transform-origin: 0 0;
transform-origin: 100% 0;
transform-origin: 0 100%;
transform-origin: 100% 100%;

分別表示從左上角、右上角、左下角、右下角擴(kuò)張,可想而知,默認(rèn)的transform-origin為50% 50%.

源碼如下:

<!DOCTYPE html>
<html>
<head>
  <title>網(wǎng)易圖片動(dòng)畫</title>
  <style>
    div.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
      transition:transform 2s;
    }
    img.bigger:hover{
      transform: scale(1.2,1.2);
    }
  </style>
</head>
<body>
  <div class="img">
    <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
  </div>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 基于JavaScript實(shí)現(xiàn)添加到購物車效果附源碼下載

    基于JavaScript實(shí)現(xiàn)添加到購物車效果附源碼下載

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)添加到購物車效果附源碼下載的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-08-08
  • JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果示例

    JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果示例

    這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-01-01
  • JS+CSS實(shí)現(xiàn)一個(gè)氣泡提示框

    JS+CSS實(shí)現(xiàn)一個(gè)氣泡提示框

    氣泡提示框牽扯到的技術(shù)有:JS響應(yīng)鼠標(biāo)的事件、純CSS制作三角形,附截圖及示例代碼,感興趣的朋友可以參考下
    2013-08-08
  • 深入了解JavaScript代碼覆蓋

    深入了解JavaScript代碼覆蓋

    這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個(gè)測試套件執(zhí)行特定代碼庫的全面程度。,需要的朋友可以參考下
    2019-06-06
  • 微信小程序監(jiān)聽用戶登錄事件的實(shí)現(xiàn)方法

    微信小程序監(jiān)聽用戶登錄事件的實(shí)現(xiàn)方法

    這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • 微信小程序getLocation 需要在app.json中聲明permission字段

    微信小程序getLocation 需要在app.json中聲明permission字段

    這篇文章主要介紹了微信小程序getLocation 需要在app.json中聲明permission字段,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • JavaScript執(zhí)行效率與性能提升方案

    JavaScript執(zhí)行效率與性能提升方案

    如何提升JavaScript執(zhí)行效率與性能在前端開發(fā)中位于一個(gè)很重要的地方,這節(jié)來研究下如何在平時(shí)做項(xiàng)目過程中,提升JavaScript性能與運(yùn)行效率,需要的朋友可以參考下
    2012-12-12
  • JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法

    JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄狫S把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-07
  • TypeScript如何開啟嚴(yán)格空值檢查

    TypeScript如何開啟嚴(yán)格空值檢查

    這篇文章主要介紹了TypeScript如何開啟嚴(yán)格空值檢查,文章圍繞TypeScript的相關(guān)資料展開詳情內(nèi)容,需要的小伙伴可以參考一下
    2022-03-03
  • js異步上傳多張圖片插件的使用方法

    js異步上傳多張圖片插件的使用方法

    這篇文章主要為大家詳細(xì)介紹了js異步上傳多張圖片插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-10-10

最新評論