收藏主题
// ==UserScript==
// @author DemoJameson
// @description 使 Opera 图片浏览页面的图片可以拖拽，左键点击页面则可以缩放图片
// @exclude *.html
// @exclude *.htm
// @exclude *.jsp
// @exclude *.php
// @exclude *.aspx
// @exclude *.asp
// ==/UserScript==
document.addEventListener("DOMContentLoaded", function () {
// 判断是否为图片浏览页面
var oLinks = document.getElementsByTagName("link");
if (oLinks && oLinks.length == 1 && oLinks[0].href == "opera:style/image.css") {
// ------------------------ 设置项 ------------------------
var bDragDrop = true; // 是否允许拖拽移动图片
var bZoom = true; // 是否允许缩放图片
var oMode= {
defaultMode: "NORMAL", // 打开页面时图片的默认模式，任选其一：NORMAL、FIT_TO_WINDOW、FIT_TO_WIDTH、FIT_TO_HEIGHT
NORMAL: 0, // 从默认模式开始，按数字从小到大循环切换；如不想使用某模式，则将其设为负数（如 -1、-2，不能重复）。
FIT_TO_WIDTH: 1,
FIT_TO_HEIGHT: -3,
FIT_TO_WINDOW: 2
};
// ------------------------ 设置项 ------------------------
var oBody = document.body,
oDiv = document.getElementsByTagName("div")[0],
oImg = oDiv.getElementsByTagName("img")[0];
var iDiffX, iDiffY;
var iPosXBefore, iPosYBefore, iPosXAfter, iPosYAfter;
// 获取有效的模式的数目，添加类数组的元素
oMode.length = 0;
for (var mode in oMode) {
if (typeof(oMode[mode]) === "number" && mode != "length" && oMode[mode] >= 0) {
oMode[oMode.length++] = mode;
}
}
// 创建一个数组，用于保存每个模式切换前滚动条的位置
var aPageOffset = [];
for (var i = 0, iLength = oMode.length; i < iLength; i++) {
aPageOffset[i] = {
pageXOffset: 0,
pageYOffset: 0
}
}
// 设置图片居中
oImg.alt = "";
var iCount = 0;
var iIntervalID = setInterval(function () {
if (oImg.width > 1 || iCount++ > 50) {
window.clearInterval(iIntervalID);
oImg.removeAttribute("alt");
oDiv.style.position = "absolute";
oDiv.style.height = "auto";
if (bZoom) {
oMode.mode = oMode[oMode.defaultMode];
resizeImgage();
} else {
setImageCenter();
}
}
}, 100);
// 拖拽
if (bDragDrop) {
document.addEventListener("mousedown", handleMouseDown, false);
}
// 缩放
if (bZoom) {
document.addEventListener("mouseup", handleMouseUp_ZomeImage, false);
}
// 拖拽处理函数
function handleMouseDown(oEvent) {
iPosXBefore = oEvent.clientX;
iPosYBefore = oEvent.clientY;
if(oEvent.button == 0 && oEvent.target.nodeName == "IMG") {
iDiffX = oEvent.clientX - oDiv.offsetLeft;
iDiffY = oEvent.clientY - oDiv.offsetTop;
document.addEventListener("mousemove", handleMouseMove, false);
document.addEventListener("mouseup", handleMouseUp, false);
document.addEventListener("blur", handleMouseUp, false);
}
}
function handleMouseMove(oEvent) {
oDiv.style.left = oEvent.clientX - iDiffX;
oDiv.style.top = oEvent.clientY - iDiffY;
}
function handleMouseUp(oEvent) {
// 停止拖拽
document.removeEventListener("mousemove", handleMouseMove, false);
document.removeEventListener("mouseup", handleMouseUp, false);
document.removeEventListener("blur", handleMouseUp, false);
}
function handleMouseUp_ZomeImage(oEvent) {
// 鼠标按下与松开时在同一位置才缩放图像
iPosXAfter = oEvent.clientX;
iPosYAfter = oEvent.clientY;
if (Math.abs(iPosXAfter-iPosXBefore) < 5 && Math.abs(iPosYAfter-iPosYBefore) < 5) {
resizeImgage();
}
}
function resizeImgage() {
// 记录滚动条位置
aPageOffset[oMode.mode].pageXOffset = window.pageXOffset - oDiv.offsetLeft;
aPageOffset[oMode.mode].pageYOffset = window.pageYOffset - oDiv.offsetTop;
// 还原图片
oImg.style = "";
oDiv.style.top = oDiv.style.left = "0px";
// 重新调整图片
switch (oMode.mode) {
case oMode.FIT_TO_WINDOW:
oImg.style.maxHeight = window.innerHeight + "px";
oImg.style.maxWidth = window.innerWidth + "px";
break;
case oMode.FIT_TO_WIDTH:
oImg.style.width = window.innerWidth + "px";
break;
case oMode.FIT_TO_HEIGHT:
oImg.style.height = window.innerHeight + "px";
break;
}
setImageCenter();
// 下一模式
oMode.mode = ++oMode.mode % oMode.length;
// 还原滚动条位置
window.scrollTo(aPageOffset[oMode.mode].pageXOffset, aPageOffset[oMode.mode].pageYOffset);
}
// 使图片居中
function setImageCenter() {
if (oBody.clientHeight > oImg.height) {
oDiv.style.top = (oBody.clientHeight - oImg.height) / 2;
}
if (oBody.clientWidth > oImg.width) {
oDiv.style.left = (oBody.clientWidth - oImg.width) / 2;
}
}
}
},false);在10.50中，点击右键会自动将图片居中并且进行模式转换。求修改，点击右键的时候仅仅只弹出菜单~
