JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
本文實(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的mouseover和 mouseout事件,但是不知道如何使圖片從中間放大,日后再行嘗試吧,代碼如下:
<!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)添加到購物車效果附源碼下載的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JS實(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-01JS+CSS實(shí)現(xiàn)一個(gè)氣泡提示框
氣泡提示框牽扯到的技術(shù)有:JS響應(yīng)鼠標(biāo)的事件、純CSS制作三角形,附截圖及示例代碼,感興趣的朋友可以參考下2013-08-08微信小程序監(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字段,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03JS把內(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