图片自备：
代码：
<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "viewport" content= "width=device-width, initial-scale=1.0"> < meta http-equiv= "X-UA-Compatible" content= "ie=edge"> < title>Document</ title> < style> *{ margin: 0; padding: 0; }
.abc{ width: 300 px; height: 300 px; border: 5 px solid red; overflow: hidden; } img{ width: 100 %; height: 100 %; transition: transform 1 s; transform: scale( 1); -webkit-transition: transform 1 s; }
</ style> </ head> < body> < div class= "abc"> < img src= "skate.jpg" alt= ""> </ div> < script> varobj =document. getElementsByClassName( "abc")[ 0]; varimg =document. getElementsByTagName( "img")[ 0]; obj. onmouseover =function(){ img.style.transform = "scale(1.2)"; } obj. onmouseout =function(){ img.style.transform = "scale(1)"; } </ script> </ body> </ html>
上面我们使用了 transform 的scale 和 过渡transition 实现功能；
但是，很重要的一点是：
document.getElementByClassName 和document.getElementByTagName 是 ie8 以及以下的版本没法作用的；
transform 更是要命，ie 9 都不行，得 ie9+才能支持;
所以根据需求寻求替代解决方案吧；
