登录 立即注册

首页 > 绿虎论坛 > 网页插件 (发帖)

标题: [网页插件] 放弃治疗颈椎病(图片旋转插件)

作者: @Ta

时间: 2020-09-21发布,2022-06-17修改

点击: 25579

近日多位虎友图片好像都没有按照预期显示正常的方向,仿佛想要免费为我治疗颈椎病。 使用插件轻松放弃治疗。代码如下

版本1 前端旋转

带有旋转过渡动画 不耗费流量 但是无法适应宽度 简单粗暴

导入网页插件:图片旋转(当前用户:2,总安装次数:2)
<script>
/** 旋转图片功能开始 版本1 前端旋转  **/
window.onload = () => {
    document.querySelectorAll('.topic-content img,.floor-content img').forEach((img) => {
        let ctrl = document.createElement("div");if (img.classList.contains('hu60_face')||img.classList.contains('avatar')) {ctrl = img;} else {ctrl.innerText = '【放弃治疗颈椎病】';}
        ctrl.onclick = (e) => {e.preventDefault();let rotate = parseInt(img.style.transform.split('(')[1]);img.style.transition = 'all 0.3s';img.style.marginLeft='20%';img.style.transform = 'rotate(' + ((isNaN(rotate) ? 0 : rotate) - 90) + 'deg)'}
        img.parentNode.insertBefore(ctrl, null);
    })
}
/** 旋转图片功能结束 版本1 前端旋转 **/
</script>

版本2 服务端适配处理 (已失效)

不带有旋转过渡动画 最多耗费4次流量 可以自适应宽度 点击图片新窗口打开的是旋转后的图片

虎绿林离开七牛云后,该方法已失效。

导入网页插件:图片旋转(已失效)(当前用户:0,总安装次数:0)
<script>
/** 旋转图片功能 服务端实现版  开始 **/
window.onload = () => {
    document.querySelectorAll('.topic-content img,.floor-content img').forEach((img) => {
        let ctrl = document.createElement("div");
        if (img.classList.contains('hu60_face') || img.classList.contains('avatar')) {
            ctrl = img;
        } else {
            ctrl.innerText = '【放弃治疗颈椎病】';
        }
        ctrl.onclick = (e) => {
            e.preventDefault();
            const str = '?imageMogr2/rotate/';
            if (img.src.includes(str)) {
                const src = img.src.split(str);
                modifySRC(src[0] + str + (parseInt(src[1]) - 90) % 360)
            } else {
                fetch(img.src).then((res) => {
                    modifySRC(res.url + str + '-90')
                })
            }
            function modifySRC(src) {
                img.src = src;
                img.parentElement.href = img.src;
                img.parentElement.target = '_blank';
            }
        }
        img.parentNode.insertBefore(ctrl, null);
    })
}
/** 旋转图片功能  服务端实现版  结束 **/
</script>

装好插件来试试吧:(下图来自本站帖子:饿了么美团平台是真6啊,把骑手都变成个体工商户了)

image.png

版本3 采用canvas前端重绘旋转图片,使用canvas的尺寸自适应dom的渲染。

既能自适应宽度 还无需再次网络加载 缺点是暂未实现

 // TODO 版本3 {勉强}

红米Note4超高配版(银色)


[隐藏样式|查看源码]


『回复列表(12|隐藏机器人聊天)』

1. 试了好像没效果
一个帅逼
(/@Ta/2020-09-21 14:44//)

2.

@Dieinwarm,啊 刚刚做了下修正
红米Note4超高配版(银色)

(/@Ta/2020-09-21 14:48//)

4.

@加勒比海带,我加了一句 img.style.marginLeft='20%'; 比较简单粗暴
红米Note4超高配版(银色)

(/@Ta/2020-09-21 15:53//)

5.

@加勒比海带,现在有版本2 服务端版本 可以试试

/** 旋转图片功能 服务端实现版  开始 **/
参考更新的帖子内容 ## 版本2
/** 旋转图片功能  服务端实现版  结束 **/

红米Note4超高配版(银色)

(/@Ta/2020-09-21 16:47//)

9.

@o,放在<script></script>中间

(/@Ta/2020-09-22 01:31//)

11. @o,你要用Jhin主题才行
(/@Ta/2020-09-22 08:23//)

13.

@加勒比海带,喜提彩蛋一枚
红米Note4超高配版(银色)

(/@Ta/2020-09-22 09:34//)

14.

@加勒比海带,前端版本还是后端版本
红米Note4超高配版(银色)

(/@Ta/2020-09-22 09:35//)

15.

@o,嗯 这个适合PC版本 手机端体验不怎么样 还是旋转设备吧
红米Note4超高配版(银色)

(/@Ta/2020-09-22 09:38//)

16.

@o,图片下方会出现一个可点击链接。

Screenshot_2020-09-22-10-15-19-548_com.UCMobile.jpg

(/@Ta/2020-09-22 10:17//)

17.
@水木易安,卧槽,是个狠人
广告位一个草根博客网站https://76wp.cn奇乐网自制小尾巴
(/@Ta/2020-09-23 14:52//)

18.

@寻梦xunm
红米Note4超高配版(银色)

(/@Ta/2020-09-24 15:18//)

回复需要登录

11月8日 19:00 星期五

本站由hu60wap6华为CPU驱动

备案号: 京ICP备18041936号-1