JS和CSS3实现图像响应鼠标移动放大效果示例

本文以JS和CSS3为例，实现了图片响应鼠标移动的放大效果。分享给大家参考，如下：

今天看网易的网站，当我把鼠标放在上面的时候，发现图片放大了，图片缩小了，就自己试了一下。结果如下。

方法1:使用js和css3

效果如下：

这个实现很简单，就是用js的mouseover和mouseout事件，但是不知道怎么从中间放大图片。以后再试。代码如下：

！DOCTYPE htmlhtmlhead title网易图片动画/title style div . img { width : 220 px；高度： 170 px；margin: 200px汽车；飞越：隐藏；} img . big { width : 100%；高度：100%；} @比{width: 100%大的关键帧；高度： 100%；}到{ width : 110%；高度：110%；} } @个较小的关键帧{从{ width : 110%；高度：110%；}到{ width : 100%；高度： 100%；} }/style/head body div class=' img ' img class=' bigger ' src=' http :3358 CMS-bucket . no sdn . 127 . net/d9b 6 AFA 0 bad 743 f 88 c 1780 C3 a 064202 c 20170218074455 . JPEG？imageview thumbnail=185y 116 quality=85 ' alt=' '/div script var img=document . queryselector(' img ')；img . onmouseover=function(){ img . style . CSS text=' animation : big 2s；宽度：110%；' height :110%；'；} img . onmouseout=function(){ img . style . CSS text=' animate : small 2s '；} /script/body/html方法2:使用css3方法

Css3确实给我们带来了很多好处，让我们更容易处理问题。这里使用transform : scale()；可以实现，但这要和悬停结合使用，可以设置过渡的时间，效果更好。不用说，效果如下：

这样的效果是不是好很多？我们可以看到它正在从中心扩张。但是只要我们添加transform-origin属性，我们就可以很好地控制变化的中心，比如：

transform-origin : 0 0；transform-origin : 100% 0；transform-origin : 0 100%；转换-原始： 100% 100%；表示分别从左上角、右上角、左下角、右下角展开。可以想象，默认的变换原点是50% 50%。

源代码如下：

！DOCTYPE htmlhtmlhead title网易图片动画/title style div . img { width : 220 px；高度： 170 px；margin: 200px汽车；飞越：隐藏；} img . big { width : 100%；高度：100%；transition:transform 2s} img . bigger : hover { transform : scale(1.2，1.2)；}/style/head body div class=' img ' img class=' bigger ' src=' http :http://CMS-bucket . no sdn . 127 . net/d9 B6 AFA 0 bad 743 f 88 c 1780 C3 a 064202 c 20170218074455 . JPEG？Imageview缩略图=185y 116 Quality=85 ' Alt=' '/div/body/HTMl更多对JavaScript感兴趣的读者，请查看本网站主题：《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》。

希望本文对JavaScript编程有所帮助。