浏览器中的图片如何直接旋转角度?

写了一个小书签,把以下代码当做网址,保存为书签栏的书签,然后点击一下旋转90度,只针对在新标签页中打开的图片设计。

javascript:(function(){/* rotate_IMG.2021.09.14 */if(!document.body.querySelector("style#rotate_img")){const a=document.createElement("style");a.id="rotate_img",a.innerHTML=`img[data-deg="90"] {transform: rotate(90deg);}img[data-deg="180"] {transform: rotate(180deg);}img[data-deg="270"] {transform: rotate(270deg);}`,document.body.appendChild(a)}const img=document.body.querySelector("img");!img.dataset.deg||360<=+img.dataset.deg?img.dataset.deg=90:img.dataset.deg=+img.dataset.deg+90;})()

2021.09.15 20:06

以此为案例写了一篇实战记录( JS 脚本实战案例 0001 - #2,来自 ejmoog ),同时搞了一份更加简单的代码(附在底下),反正两个代码都能用,达到的效果都一样,如果你看到了这里就用下面的代码,如果已经在使用上面的代码了,也没有必要特别更新。

javascript:(function(){ const oldDeg = +document.body.querySelector('img').dataset.deg;    const newDeg = ((oldDeg ? oldDeg : 0) + 90)%25360;document.body.querySelector('img').style.transform = 'rotate('+newDeg+'deg)';document.body.querySelector('img').dataset.deg = newDeg;})()
3 个赞