直观：以JS和CSS3为例来实现响应鼠标移动的图片放大效果的示例

本文介绍了JS和CSS3示例，以实现响应鼠标移动而缩放的效果。与所有人共享以供参考，如下所示：

今天看一下网易网站，当我将鼠标放在上面时，发现图片放大了，而将其移开时图片缩小了，所以我自己尝试了一下。结果如下。

方法1：使用js和css3

效果如图所示：

这种实现非常简单，就是使用js的mouseover和mouseout事件，但是我不知道如何从中间放大图片，以后再试一次，代码如下如下：

方法2：使用css3方法

css3确实为我们带来了很多好处，对我们来说解决问题更方便。可以通过使用transform：scale（）;来实现。此处，但这应与悬停结合使用，并且可以将过渡持续时间设置为具有更好的效果。不多说，效果如下：

这种效果好得多吗？可以看出它从中心开始扩展。

但是只要我们添加了transform-origin属性，就可以很好地控制更改的中心点，例如：

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

分别表示从左上角，右上角，左下角和右下角扩展。您可以想象，默认的转换原点是50％50％。

源代码如下：

更多对JavaScript相关内容感兴趣的读者可以查看此站点的主题：“ JavaScript图像操作技巧百科全书”，“ JavaScript运动效果和技巧摘要”，“ JavaScript切换特殊效果和技巧摘要”，“ JavaScript错误和调试“技能摘要”，“ JavaScript数据结构和算法技能摘要”，“ JavaScript遍历算法和技能摘要”和“ JavaScript数学运算使用情况摘要”

我希望本文能对您的JavaScript编程有所帮助。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-315676-1.html