将鼠标移到图片上以放大图片[css3示例]

在当前的网页设计中，经常使用通过将鼠标移到图片上来进行放大的效果，并且这种效果主要用于文章列表中。起初我以为是用JQuery实现的，但是后来我意识到是用CSS3实现的。尽管使用JQuery可以实现相同的效果，但是使用CSS3更加简单方便。本文将介绍如何使用CSS3实现此功能。

在介绍实现代码之前，让我们看一下效果演示。

请在图片上移动鼠标

我看到了效果：将鼠标移到图片上时，图片将自动放大。

CSS3的实现如下：

HTML代码

execcodegetcode

代码分析：

1、首先，知道DIV和IMG之间的层次关系。 IMG位于特定的DIV中，放大后的图片不应超过DIV框。

2、设置溢出：隐藏； DIV的属性，其效果是当图片变大时，超过DIV区域的图片部分将被自动隐藏。

3、设置转换：所有0. 6s；属性和变换：scale（1. 4);属性，其中过渡：所有0. 6s;是变化的速度，值越小，速度越快。变换：scale（1. [k8 ];是变化范围，比例（1. 4)表示将1.放大4倍。

示例2：图片放大不限于DIV框

如果您希望在放大后完全显示图片，而不是仅显示DIV中的区域，那么我们只需要删除div的overflow属性，就不能将其设置为auto，否则div将具有滚动条。效果演示如下：

请在图片上移动鼠标

html代码如下

execcodegetcode

代码分析：

删除div的溢出属性，其他代码保持不变。

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