Shift+scroll 图片缩放

hbghlyj

(kuing写的zdy3.js) 功能: Shift+鼠标滚轮缩放图片、点击图片切换原始大小

在Chrome上,
Shift+鼠标滚轮可正常缩放


在Firefox上,
Shift+鼠标滚轮 无效(???)

hbghlyj

(见4楼)
倒数第4行
item.setAttribute("onmousewheel", "return bbimg(this)");
这里应该改为
item.setAttribute("onwheel", "return bbimg(this)");
或者更简洁的
item.addEventListener("wheel", bbimg);

wheelDelta被废弃了,见MDN.
应该改为event.deltaY
Browser compatibility 可见Firefox不支援mousewheel event

hbghlyj

mousewheel event被废弃了, 应该改用wheel event, 见MDN
Standardized wheel event: wheel
Browser compatibility 除了Safari on IOS之外,浏览器都支援wheel event

hbghlyj

Scroll wheel: Alternatives

Touchpad virtual scrolling Slide along the scrolling line (on some models, there will be no such line, but you can still slide on this area to use this feature) on the right of the touchpad to use the virtual scrolling feature, as shown in the following figure.
Pointing stick is a small analog stick used as a pointing device typically mounted centrally in a computer keyboard. Like other pointing devices such as mice, touchpads or trackballs, operating system software translates manipulation of the device into movements of the pointer or cursor on the monitor.
A trackball is a pointing device consisting of a ball held by a socket containing sensors to detect a rotation of the ball about two axes—like an upside-down ball mouse with an exposed protruding ball. Users roll the ball to position the on-screen pointer, using their thumb, fingers, or the palm of the hand, while using the fingertips to press the buttons.

kuing

恭喜，你又成功把我搞晕。

我不看了，你把你觉得最好的最终的完整代码贴出来就好。

hbghlyj

css-tricks.com/almanac/properties/z/zoom/

Zoom is an old IE thing. It isn’t something you should use on live sites. If you want to scale content, use CSS Transforms. You can also use filters if you need oldIE support.

kuing

hbghlyj 发表于 2022-8-9 20:42
css-tricks.com/almanac/properties/z/zoom/

Zoom is an old IE thing. It isn’t something you  ...

不必解释这些，我在等你的最终代码。

hbghlyj

kuing 发表于 2022-8-9 14:04
不必解释这些，我在等你的最终代码。

我只是汇集一些资料, 实际上写的代码不怎么样

1. function bbimg(e){
2.     if(!e.shiftKey) return;
3.     let scale = parseFloat(this.style.transform.slice(6,-1))||1;
4.     scale += e.deltaY>0 ? .1 : scale>0.2 ? -.1 : 0;
5.     this.style.transform = 'scale('+scale+')';
6. }
7. var images=document.querySelectorAll('.t_fsz img:not([onclick^=show_tikz_window])');
8. for (let item of images) {
9.     item.addEventListener("wheel", bbimg);
10.     item.classList.add('mw100');
11.     item.setAttribute("onclick","this.classList.toggle('mw100');this.style.transform=null");
12. }

Copy the Code

还得由您改进一下

hbghlyj

经过和kuing讨论并参考StackOverflow以后, 发现修改transform后width和height不变,导致parent并不会跟着resize.
As described in the spec:

In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element.

后来就放弃transform, 直接修改width和height如下

1. function bbimg(e){
2.     if(!e.shiftKey) return;
3.     let scale = e.deltaY>0 ? 1.1 : 0.9,
4.         temp_w=parseFloat(this.getBoundingClientRect().width),
5.         temp_h=parseFloat(this.getBoundingClientRect().height);
6.     this.classList.remove('mw100');
7.     this.setAttribute("width", temp_w*scale);
8.     this.setAttribute("height", temp_h*scale);
9. }
10. function togglemw100(){
11.     this.removeAttribute('width');
12.     this.removeAttribute('height');
13.     this.classList.toggle('mw100');
14. }
15. var images=document.querySelectorAll('.t_fsz img:not([onclick^=show_tikz_window])');
16. for (let item of images) {
17.     togglemw100.call(item);
18.     item.removeAttribute("onclick");
19.     item.addEventListener("click", togglemw100);
20.     item.addEventListener("wheel", bbimg);
21. }

Copy the Code

hbghlyj

移动端可以弄一下两指缩放?

hbghlyj

.mw100{
  max-width: 100%;
  height: auto;
}

这样就不会变扁了. 参考Mapping the width and height attributes of media container elements to their aspect-ratio

hbghlyj

for (let item of images) {
    togglemw100.call(item);
    item.removeAttribute("onclick");

建议在php模板中把class="mw100"加上,并把Discuz所指定的img的width和height属性去除,便可以省去蓝色的两行代码.

hbghlyj

hbghlyj 发表于 2022-8-9 15:18
经过和kuing讨论并参考StackOverflow以后, 发现修改transform后width和height不变,导致parent并不会跟着res ...

建议把
var images=document.querySelectorAll('.t_fsz img:not([onclick^=show_tikz_window])');
改为
var images=document.querySelectorAll('.t_fsz img.zoom');
这样一来,开启HTML时 手工写的<img>的width和height就不会被overide了.

hbghlyj

hbghlyj 发表于 2022-8-9 18:55
建议把
var images=document.querySelectorAll('.t_fsz img:not([onclick^=show_tikz_window])');
改为

还是有一个问题:
比如Discuz“网络图片”工具

1. [img=45,45]https://kuing.cjhb.site/uc_server/data/avatar/000/00/28/61_avatar_small.jpg[/img]

Copy the Code

它的宽高也被override了
BTW,如果写成0,就相当于width:auto

1. [img=0,45]https://kuing.cjhb.site/uc_server/data/avatar/000/00/28/61_avatar_small.jpg[/img]

Copy the Code

kuing

hbghlyj 发表于 2022-8-10 03:56
还是有一个问题:
比如Discuz“网络图片”工具

将 togglemw100.call(item); 改成 item.classList.add('mw100'); 就行了吧？

1. [img=450,450]https://kuing.cjhb.site/uc_server/data/avatar/000/00/28/61_avatar_small.jpg[/img]

Copy the Code

放大十倍：

hbghlyj

HTMLImageElement.naturalWidth是原图宽度

HTMLImageElement.width是<img> HTML属性指定的宽度

适应了parentNode并且应用了CSS后, 在屏幕的最终值为this.getBoundingClientRect().width

kuing

hbghlyj 发表于 2023-1-21 22:32
HTMLImageElement.naturalWidth是原图宽度

HTMLImageElement.width是 HTML属性指定的宽度

有原图宽度 .naturalWidth 那也就有原图高度 .naturalHeight 吧？

既然有这两个固定的值，那何不先储存一个比例值，比如 let bili=this.naturalHeight/this.naturalWidth; 在最后设置放缩后的新宽高时用这个比例乘一下，这样就不会有当初出现过的变扁的问题了？

那 9#开头的那段是不是就可以写成下面这样？：

1. function bbimg(e){
2.     if(!e.shiftKey) return;
3.     let scale = e.deltaY>0 ? 0.9 : 1.1,
4.         bili=this.naturalHeight/this.naturalWidth,
5.         temp_w=this.getBoundingClientRect().width*scale;
6.     this.classList.remove('mw100');
7.     this.setAttribute("width", temp_w);
8.     this.setAttribute("height", temp_w*bili);
9. }

Copy the Code

kuing

kuing 发表于 2023-1-22 02:54
有原图宽度 .naturalWidth 那也就有原图高度 .naturalHeight 吧？

既然有这两个固定的值，那何不先储存 ...

还是不改了。
发图时如果指定了（比例不同于原图的）宽高，楼上这种方法在放缩时就会变回原图比例，原 9# 的方式就不会，应该是吧