【前端开发实例】JS CSS

来源：互联网发布：三国志9怎么开优化编辑：程序博客网时间：2024/05/19 13:45

Question. 问题

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

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

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

Solution. 解决

<!DOCTYPE html><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. 效果

缩放的效果：

这里写图片描述

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

阅读全文

0 0