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

Question. 问题

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

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

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

Solution. 解决


<html>
<head>
<title>title>
head>
<body>
<img border="0" src="demo.jpg" onmousewheel="return rollImg(this)">
body>
<script language="javascript">
function rollImg(o){
    /* 获取当前页面的缩放比
        若未设置zoom缩放比,则为默认100%,即1,原图大小
    */ 
    var zoom=parseInt(o.style.zoom)||100;
    /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
        wheelDelta统一为±120,其中正数表示为向上滚动,负数表示向下滚动
    */
    zoom+=event.wheelDelta/12;
    /* 如果缩放比大于0,则将缩放比加载到页面元素 */
    if (zoom>0) o.style.zoom=zoom+'%';
    /* 如果缩放比不大于0,则返回false,不执行操作 */
    return false;
}
script>
html>

这里主要有两个知识点,一个是 CSS 的知识点,zoom 缩放比;另一个是 JS 知识点,wheelDelta 滚动值,onmousewheel 获取滚轮值事件。

Effection. 效果

缩放的效果:

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

这是我的二维码,如果显示在网页中,太大了网页就会很难看,但太小了,手机又很难扫,通过鼠标滚轮实现缩放二维码的效果,就能较好的解决默认情况下考虑页面美观显示小图标二维码,需要扫码的情况下不需要点开另一个页面进行扫码。

你可能感兴趣的:(开发实践,前端)