当前位置：网站首页 > 热门文章 > 正文

HTML5+CSS3实现图片的放大/缩小 html5图片放大代码

bigegpt 2024-11-09 11:06 33 浏览

最近做项目时，经常遇到需要图片缓慢放大的效果。我做的时候想到了几种方法，所以来总结一下。

1、利用css改变图片的宽高，做出视觉上的放大。

首先，将图片写入html页面中，给定宽高。

箭头所指向的就是我们需要变化的图片。我们需要给定图片父级盒子的宽高，如上图。

Tips:

transition用于设置四个过渡属性。

这四个属性分别为：

这个属性要设置在做动画的元素上。就是“谁”做动画，“谁”就需要设置过渡属性。

设置图片的宽高分别为100%，是为了让图片与父级盒子一样大。这样当盒子变大时，图片不会出现偏移的现象。

以上准备工作完成后，我们就需要设置鼠标移动后图片父级盒子改变到的宽高。

这样就可以实现鼠标划过图片变大的效果了。

当然，同样也可以直接作用于图片上，方法还是一样的。

2、利用jQuery中的css()方法，改变图片的大小。

同样将图片盒子给定宽高。

样式与方法一相同。

然后我们利用css()方法来改变他的大小。

这样就可以利用css()方法来改变他的宽高，从而做到图片的放大效果。

3、利用jQuery中的animate()自定义动画的方法，改变图片的大小，实现放大的效果。

要利用这种方式，html与css跟之前是一样的。

由于animate方法是自定义动画方法，因此不需要过渡属性来进行缓动。

此时，页面上的图片便会自动放大。

4、利用scale()方法，实现图片放大的效果。

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。图片的变化是以中心为基准点来变化的。

这个方法同样是通过样式进行改变的。

结构和样式不需要进行调整。

只需要给图片盒子加一个transform: scale(1.2);即可。数值表示放大/缩小的为原始的几倍。（此时的过渡效果最好还是添加上，可以使图片变化时感觉更加圆滑流畅）

5、利用css3的keyframe来创建动画

Keyframe的定义和用法如下：

首先html结构还是一样，css则需要进行改变。我们需要设定的是动画后的值。

比如：

接下来我们要设定动画中css样式。我将动画分成了5个阶段。每个阶段改变他宽高的1/5，连贯下来就会出现动画的效果。

之所以写多个，是因为浏览器并不完全之前keyframe，因此需要使用每个浏览器所支持的不同的写法。

这是w3c上标明的对于浏览器的支持程度。

创建完动画之后我们就可以直接引用了。只要使用animation就可以搞定了。

第一个值表示动画的名称，也就是我们所定义的动画名称。第二个值是完成动画的时间。

给定完毕后，便能够出现图片放大的动画效果了。

原文地址：http://www.gonet.com.cn/webduirshow-124.html

js获取屏幕宽高

上一篇：h5 根据固定的宽度，高度计算一段html的高度
下一篇：「深度」解析深度神经网络背后的数学原理

HTML5+CSS3实现图片的放大/缩小 html5图片放大代码

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程