【前端开发实例】JS CSS - 鼠标滚轮实现图片缩放 -(五)

Question. 问题

显示屏大小有限,因此网页上的单张图片尺寸必须有所限制,但是对于图片中有重要信息需要被用户浏览,就不能使图片尺寸过小,那么怎么在默认加载时显示的小图片,用户能够通过友好的方式看到图片完整的信息呢?

像这样的需求在实际开发中会碰到很多,比如最常见的网页地图,浏览器窗口不可能将地图全部铺开,一种好的方式就是通过滚轮实现局部的放大缩小,交由用户决定是否需要浏览该部分的详细信息。

又比如教程类的网站,发布的图文教程,图片可能是直接通过屏幕截图截取的某个软件的操作界面,学习者在浏览整片图文教程的时候可能不需要去看截图中的细节,但是当用户需要对于每一个步骤的图文进行详细查看时,就需要查看大图,滚轮滚动是一种优雅的显示大图的方案,它可以就在当前位置放大图片,不打扰用户的阅读思路,同时可以自由掌握放大缩小的尺度,更加灵活。

Solution. 解决

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值