请教下在js中zoom其中的用法!

Posted 2023-03-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了请教下在js中zoom其中的用法!相关的知识，希望对你有一定的参考价值。

照着网上的例子做了一个转动鼠标转轮缩放图片的代码
其中的一些东西不理解,请教下其含义!
代码如下:

function aa(o)

var zoom=parseInt(o.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0)
o.style.zoom=zoom+'%';
return false;

<img src="0287-1.jpg" onmousewheel="aa(this)" />
省略了部分代码!
我写的这个就是但在img中转动鼠标转轮执行aa(),this获取当前元素的各个style属性,然后在aa()声明zoom,将获取的图片(就是aa()中的o)zoom转换成数值型,括号内的10是进制数,按照及进制转换,但后面的||100是什么意思?或者100进制,计算机中应该没有100进制吧?而且我把括号内的10去掉,应该还可以运行,默认是按照10进制,但去掉后面100就不行了,后面的zoom+=event.wheelDelta/12;里面的event.wheelDelta/12是什么意思?为除以12应该是控制缩放比例,event.wheelDelta是什么含义?因为是照着网上的例子做的,所以只是大体理解!

parseInt(o.style.zoom,10)||100 这个是逻辑或运算
“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。追问

event.wheelDelta这个我已经弄明白了!
上面的parseInt(o.style.zoom,10)||100
||100是什么意思?我尝试过吧||100去掉,就不能进行缩放,如果把括号中的10(按照多少进制转换),还可以进行缩放,因为默认的是10进制,我把||100改成||1000,每次进行缩放的倍数就很大!这个||100的作用是什么?

追答

是这样的，当||左边为true时，就只考虑左边；当左边不为true时，就考虑右边。
也就是说parseInt(o.style.zoom,10)不为true时，zoom就等于100.

追问

这个我弄明白了!但是如果是o.style.zoom获取回来的是数值就没有意义在要||100,因为不可能获取回来的==0,我又试了下,观察了一下o.style.zoom的数值,但第一次滑动鼠标转轮是第一次的时候,返回回来的是NaN,不是个数字,但之后滑动鼠标转轮都是数字!这个很奇怪!

追答

所以用了个逻辑或
或者你初始化下zoom

追问

初始化zoom?怎么做?你还不明白?我想不通为什么o.style.zoom获取回来的是NaN,应该是一个数字啊!

追答

一开始你没设置，估计不同的浏览器处理不一样吧。
我的意思是默认为1，你就设置样式为1.

追问

?不懂?我是说哦获取的图片的zoom为什么不是数值,而是NaN,这个zoom还能在css中设置?