【0基础开发油猴脚本】某漫画网站图片旋转

有朋友在用某漫画网站在线看漫画,但是那个网站会把漫画图片右旋90度,如图。

于是,他就像我发起了求助,问我能不能写个脚本。我说,AI都发展到2025了,前端(脚本)这种东西还用自己写吗,我就用WPS的灵犀AI,2分钟就把脚本写好了。下面就以此为例,介绍一下AI来写前端脚本的方法。

1、定位目标图片元素

按F12打开浏览器开发者窗口,点击左上角的定位功能。

此时,将鼠标指向目标图片,就会在开发者窗口中定位到该元素。

右键选择该元素,选择复制,复制CSS选择器

2、让AI写代码

直接将复制的CSS 选择器粘贴进来,然后问AI,“帮我写油猴脚本,实现XXX的功能,目标元素的CSS Selector是XXXX”。

这个功能比较简单,都无需修改,生成可直接使用。

// ==UserScript==
// @name         旋转.img-content图片90度
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  将指定CSS选择器下的图片向右旋转90度
// @author       你自己
// @match        *://*/*  
// @grant        none
// ==/UserScript==(function() {'use strict';// 定义旋转函数function rotateImages() {// 获取所有.img-content内的图片元素const images = document.querySelectorAll('.img-content img');images.forEach(img => {// 应用旋转样式(向右旋转90度)img.style.transform = 'rotate(90deg)';// 可选:调整布局(旋转后可能导致的布局问题)img.style.display = 'block';  // 避免行内元素间隙img.style.margin = '10px auto';  // 居中显示img.style.maxWidth = '100%';  // 保持容器内宽度});}// 页面加载完成后执行if (document.readyState === 'loading') {document.addEventListener('DOMContentLoaded', rotateImages);} else {rotateImages();}// 可选:监听动态加载的内容(如果页面有异步加载图片的情况)const observer = new MutationObserver(rotateImages);observer.observe(document.body, {childList: true,subtree: true,attributes: true,attributeFilter: ['src']  // 监听图片src变化});
})();

你也可以把目标网站告诉他,让他来适配链接。比如

// ==UserScript==
// @name         百度页面.img-content图片旋转90度
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在百度页面中将.img-content内的图片向右旋转90度
// @author       你自己
// @match        https://www.baidu.com/*  // 仅匹配百度域名下的页面
// @grant        none
// ==/UserScript==(function() {'use strict';function rotateImages() {// 精确匹配百度页面中的.img-content下的图片const images = document.querySelectorAll('.img-content img');images.forEach(img => {// 应用向右旋转90度(transform属性)img.style.transform = 'rotate(90deg)';// 可选布局调整(根据百度页面实际情况优化)img.style.display = 'block';      // 避免行内元素默认间隙img.style.margin = '10px auto';   // 水平居中img.style.maxWidth = '90%';       // 适配百度容器宽度(可根据实际调整)});}// 页面加载完成后立即执行if (document.readyState === 'loading') {document.addEventListener('DOMContentLoaded', rotateImages);} else {rotateImages();}// 监听页面动态加载的新内容(如百度搜索结果滚动加载图片)const observer = new MutationObserver(rotateImages);observer.observe(document.body, {childList: true,    // 监听子节点变化subtree: true,      // 监听所有后代节点attributes: true,   // 监听属性变化attributeFilter: ['src']  // 重点监听图片src属性变更(懒加载场景)});
})();

3、效果展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/913168.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/913168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue Router 中,params参数的名称必须与路由配置中的动态路径参数名完全一致

路由配置与 params 参数的绑定关系 在路由配置中,使用 冒号(:) 定义动态路径参数: // router.js(路由配置) { path: /search/:keyword, // 这里的:keyword是动态路径参数 name: Search, component: S…

Spring Boot 应用开发实战指南:从入门到实战(内含实用技巧+项目案例)

📘 Spring Boot 应用开发实战指南:从入门到实战(内含实用技巧项目案例)🚀 你是否还在为 Spring 配置复杂、开发效率低下而苦恼?Spring Boot 早已成为 Java 后端开发的“标配”,本篇文章将带你全…

【NLP入门系列五】中文文本分类案例

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 博主简介:努力学习的22级本科生一枚 🌟​;探索AI算法,C,go语言的世界;在迷茫中寻找光芒…

【微信小程序】- 监听全局globalData数据

【微信小程序】- 监听全局globalData数据 数据劫持(Object.defineProperty)实现适用场景 数据劫持(Object.defineProperty) 实现 通过拦截 globalData 的属性读写实现自动监听,适合精确监听特定变量。 ​实现步骤​&…

高速公路闲置土地资源化利用:广西浦北互通3MW分布式光伏监控实践

摘要: 分布式光伏项目在清洁能源转型中扮演重要角色,其创新的空间利用模式有助于缓解能源开发与土地资源间的矛盾。广西大唐至浦北高速公路(浦北互通)项目,利用高速公路沿线闲置空地建设光伏电站,发挥了分布…

【Linux网络编程】网络基础

目录 计算机网络背景 初识协议 网络协议 协议分层 OSI七层模型 TCP/IP五层(或四层)模型 再识协议 为什么要有TCP/IP协议? 什么是TCP/IP协议? 重谈协议 网络传输基本流程 局域网传输流程 跨网络传输流程 Socket编程预备 理解源IP地址与目的…

BlenderBot对话机器人大模型Facebook开发

文章目录 🚀 BlenderBot 的关键特性🧪 版本与改进📊 应用实例 Blender是搅拌机,果汁机,混合机的意思。 BlenderBot 是由 Facebook AI Research (FAIR) 开发的一种先进的对话生成模型。它旨在通过融合多种对话技能&…

60天python训练计划----day59

在之前的学习中,我们层层递进的介绍了时序模型的发展,从AR到MA到ARMA,再到ARIMA。本质就是把数据处理的操作和模型结合在一起了,实际上昨天提到的季节性差分也可以合并到模型中,让流程变得更加统一。 季节性差分用S来…

学习日志05 python

我相信事在人为,人定胜天,现在还是在基础语法上面打转,还是会提出一些很低级的很基础的问题,不要着急,波浪式前进、螺旋式上升的过程吧,虽然现在的确是很绝望吧...... 今天要做一个练习:编写猜…

LiteHub中间件之gzip算法

gzip算法理论部分LZ777算法霍夫曼编码算法改进型的LZ777算法代码实现压缩对象gzip实现运行分析日志查看wireshark抓包查看后台管理界面查看理论部分 gzip是一种无损压缩算法,其基础为Deflate,Deflate是LZ77与哈弗曼编码的一个组合体。它的基本原理是&…

java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)

源代码数据库LW文档(1万字以上)开题报告答辩稿ppt部署教程代码讲解代码时间修改工具 技术实现 开发语言:后端:Java 前端:vue框架:springboot数据库:mysql 开发工具 JDK版本:JDK1.…

Qt Quick 与 QML(五)qml中的布局

QML布局系统主要分为三大类:锚布局、定位器布局、布局管理器。一、锚布局(Anchors)通过定义元素与其他元素或父容器的锚点关系实现精确定位,支持动态调整。核心特性属性‌‌作用‌‌示例‌anchors.left左边缘对齐目标元素anchors.…

【Java|集合类】list遍历的6种方式

本文主要是总结一下Java集合类中List接口的遍历方式&#xff0c;以下面的list为例&#xff0c;为大家讲解遍历list的6种方式。 List<Integer> list new ArrayList<>();list.add(1);list.add(2);list.add(3);list.add(4);list.add(5);文章目录1.直接输出2.for循环遍…

博弈论基础-笔记

取石子1 性质一&#xff1a;12345可以确定先手赢&#xff0c;6不论取那个质数都输&#xff0c;789 10 11可以分别取12345变成6 性质二&#xff1a;6的倍数一定不能取出之后还是6的倍数&#xff08;不能转换输态&#xff09; #include <bits/stdc.h> using namespace st…

多任务学习-ESMM

简介 ESMM&#xff08;Entire Space Multi-task Model&#xff09;是2018年阿里巴巴提出的多任务学习模型。基于共享的特征表达和在用户整个行为序列空间上的特征提取实现对CTR、CVR的联合训练 解决的问题 SSB&#xff08;sample selection bias&#xff09; 如下图1所示&am…

K8S 集群配置踩坑记录

系统版本&#xff1a;Ubuntu 22.04.5-live-server-amd64 K8S 版本&#xff1a;v1.28.2 Containerd 版本&#xff1a; 1.7.27 kubelet logs kuberuntime_sandbox.go:72] "Failed to create sandbox for pod" err"rpc error: code Unknown desc failed to cre…

超滤管使用与操作流程-实验操作013

超滤管使用与操作流程 超滤管&#xff08;或蛋白浓缩管&#xff09;是一种重要的实验设备&#xff0c;广泛应用于分离与纯化大分子物质&#xff0c;尤其是蛋白质、多糖和核酸等。其工作原理依赖于超滤技术&#xff0c;通过半透膜对分子进行筛分&#xff0c;精准地将大分子物质…

GitHub已破4.5w star,从“零样本”到“少样本”TTS,5秒克隆声音,冲击传统录音棚!

嗨&#xff0c;我是小华同学&#xff0c;专注解锁高效工作与前沿AI工具&#xff01;每日精选开源技术、实战技巧&#xff0c;助你省时50%、领先他人一步。&#x1f449;免费订阅&#xff0c;与10万技术人共享升级秘籍&#xff01;你是否为录音成本高、声音不灵活、又想为多语言…

【中文核心期刊推荐】《遥感信息》

《遥感信息》&#xff08;CN&#xff1a;11-5443/P&#xff09;是一份具有较高学术价值的双月刊期刊&#xff0c;自创刊以来&#xff0c;凭借新颖的选题和广泛的报道范围&#xff0c;兼顾了大众服务和理论深度&#xff0c;深受学术界和广大读者的关注与好评。 该期刊创办于1986…

uniapp微信小程序css中background-image失效问题

项目场景&#xff1a;提示&#xff1a;这里简述项目相关背景&#xff1a;在用uniapp做微信小程序的时候&#xff0c;需要一张背景图&#xff0c;用的是当时做app的时候的框架&#xff0c;但是&#xff0c;在class的样式中background-image失效了&#xff0c;查了后才知道&#…