解决方案：使用JS和CSS3实例实现缩放效果以响应鼠标移动

使用JS和CSS3实例实现缩放效果以响应鼠标移动

更新时间：2018年5月4日11:52:34作者：Wayne-Zhu

本文主要介绍JS和CSS3来实现响应鼠标移动的图片放大效果，结合示例表格，分析javascript和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编程有所帮助。

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