Skip to content

P
pic-reader
提交 6565e098 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

修复移动端样式错乱的问题；增加音效

上级 e89b8681
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 641 行增加 和 4 行删除
index.html
浏览文件 @ 6565e098
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=1050, user-scalable=no" /> <!-- <meta name="viewport" content="width=1050, user-scalable=no" /> -->
<!-- <meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="width=100vw, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/> --> />
<title>PDF阅读器</title> <title>PDF阅读器</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
......
package-lock.json
浏览文件 @ 6565e098
差异被折叠。
package.json
浏览文件 @ 6565e098
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"axios": "^1.8.4", "axios": "^1.8.4",
"element-plus": "^2.9.8", "element-plus": "^2.9.8",
"modernizr": "^3.6.0",
"turn.js": "^1.0.5", "turn.js": "^1.0.5",
"vant": "^4.9.19", "vant": "^4.9.19",
"vue": "^3.5.13", "vue": "^3.5.13",
...@@ -26,6 +27,7 @@ ...@@ -26,6 +27,7 @@
"unplugin-auto-import": "^19.3.0", "unplugin-auto-import": "^19.3.0",
"unplugin-vue-components": "^28.7.0", "unplugin-vue-components": "^28.7.0",
"vite": "^6.2.4", "vite": "^6.2.4",
"vite-plugin-static-copy": "^3.0.0",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-devtools": "^7.7.2" "vite-plugin-vue-devtools": "^7.7.2"
} }
......
public/css/magazine.css 0 → 100644
浏览文件 @ 6565e098
body {
overflow: hidden;
/* background: url('../pics/wood.png'); */
margin: 0;
padding: 0;
}
.back {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: 55;
/* background: url('../pics/wood.png'); */
background: rgba(2, 0, 34, 0.986);
}
#canvas {
position: absolute;
background: url('../pics/background.jpg') repeat-x bottom center;
}
/*上一页*/
.previousPage {
width: 33%;
height: 60%;
position: absolute;
bottom: 0%;
left: 17%;
z-index: 999999;
/* background-color: aqua; */
background: transparent !important;
}
/*下一页*/
.nextPage {
width: 33%;
height: 60%;
position: absolute;
bottom: 0%;
left: 50%;
z-index: 999999;
/* background-color: aqua; */
background: transparent !important;
}
.magazine-viewport {
position: absolute;
}
.magazine-viewport .container {
z-index: 666;
position: absolute;
top: 54%;
left: 50%;
width: 1400px;
height: 781px;
margin: auto;
}
.magazine-viewport .magazine {
width: 1400px;
height: 781px;
left: -661px;
top: -300px;
}
.magazine-viewport .page {
width: 700px;
height: 781px;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.magazine-viewport .zoomer .region {
display: none;
}
.magazine .region {
position: absolute;
overflow: hidden;
background: #0066FF;
opacity: 0.2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.magazine .region:hover {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
.magazine .region.zoom {
opacity: 0.01;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
}
.magazine .region.zoom:hover {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.magazine .page {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.magazine-viewport .page img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
.magazine .even .gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
}
.magazine .odd .gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
}
.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient {
display: none;
}
.magazine-viewport .loader {
background-image: url(../pics/loader.gif);
width: 22px;
height: 22px;
position: absolute;
top: 280px;
left: 219px;
}
.magazine-viewport .shadow {
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-o-box-shadow: 0 0 20px #000;
-ms-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
}
.next-button {
width: 59px;
height: 59px;
position: absolute;
top: 50%;
background: url('../pics/arrows.png') -59px 0;
right: 10px;
z-index: 10;
}
.previous-button {
width: 59px;
height: 59px;
position: absolute;
top: 50%;
background-image: url('../pics/arrows.png');
z-index: 10;
}
.magazine-viewport .previous-button-hover {
background-position: 0 -59px;
cursor: pointer;
}
.magazine-viewport .next-button-hover {
background-position: -59px -59px;
cursor: pointer;
}
.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down {}
.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down {}
.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down {}
.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button {
display: none;
}
.animated {
-webkit-transition: margin-left 0.5s;
-moz-transition: margin-left 0.5s;
-ms-transition: margin-left 0.5s;
-o-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.exit-message {
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 40px;
z-index: 10000;
}
.exit-message>div {
width: 140px;
height: 30px;
margin: auto;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font: 12px arial;
line-height: 30px;
color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.zoom-icon {
position: absolute;
z-index: 1000;
width: 22px;
height: 22px;
top: 10px;
right: 10px;
background-image: url(../pics/zoom-icons.png);
background-size: 88px 22px;
}
.zoom-icon-in {
background-position: 0 0;
cursor: pointer;
}
.zoom-icon-in.zoom-icon-in-hover {
background-position: -22px 0;
cursor: pointer;
}
.zoom-icon-out {
background-position: -44px 0;
}
.zoom-icon-out.zoom-icon-out-hover {
background-position: -66px 0;
cursor: pointer;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
\ No newline at end of file
public/js/hash.js 0 → 100644
浏览文件 @ 6565e098
/**
* hash.js
*
* Copyright (C) 2012 Emmanuel Garcia
* MIT Licensed
*
* ****************************************
*
* Hash.pushState(true);
*
* Hash.on('/page/([0-9]+)$',
* {yep: function(path, parts) { }, nop: function() { }},
* 'Page $1');
*
* Hash.go('/page/1');
**/
(function() {
'use strict';
var hashes = {},
regexp = {},
history = [],
freq = 100,
num = 0,
pushState = false,
timer = null,
currentUrl = null,
freeze = function(obj) {
if (Object.freeze) return Object.freeze(obj);
return obj;
},
getHashParts = function() {
return window.location.href.split('#');
},
startTimer = function() {
if (!timer) timer = setInterval(function() {
if (num > 0 && currentUrl != window.location.href) {
currentUrl = window.location.href;
window.Hash.check();
}
},
freq);
},
stopTimer = function() {
if (timer) {
clearInterval(timer);
timer = null;
}
};
window.Hash = freeze({
pushState: function(yes) {
if (window.history && window.history.pushState) pushState = yes;
return this;
},
fragment: function() {
var hash = getHashParts();
return (pushState) ? window.location.pathname + ((hash[1]) ? '#' + hash[1] : '') : hash[1] || '';
},
get: function(path, params) {
var p, fragment = '',
parameters = [];
for (p in params) {
if (!Object.prototype.hasOwnProperty(p)) continue;
parameters.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p]));
}
if (parameters.length > 0) parameters = '?' + parameters.join('&');
return (pushState) ? path + parameters: getHashParts()[0] + '#' + path + parameters;
},
go: function(hash, params) {
if (this.fragment() != hash) {
var to = this.get(hash, params);
if (pushState) window.history.pushState(null, document.title, to);
else window.location.href = to;
}
return this;
},
update: function() {
currentUrl = window.location.href;
return this;
},
on: function(hash, callback, title) {
if (!hashes[hash]) hashes[hash] = {
title: title,
listeners: []
};
hashes[hash].listeners.push(callback);
num++;
startTimer();
return this;
},
check: function() {
var i, hash, parts, fragment = this.fragment();
for (hash in hashes) {
if (!Object.prototype.hasOwnProperty.call(hashes, hash)) continue;
hashes[hash].regexp = hashes[hash].regexp || new RegExp(hash);
if ((parts = hashes[hash].regexp.exec(fragment))) {
if (hashes[hash].title) document.title = hashes[hash].title;
for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].yep) hashes[hash].listeners[i].yep(fragment, parts);
} else {
for (i = 0; i < hashes[hash].listeners.length; i++) if (hashes[hash].listeners[i].nop) hashes[hash].listeners[i].nop(fragment);
}
}
return this;
}
});
})();
\ No newline at end of file
public/js/jquery.min.1.7.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
public/js/magazine.js 0 → 100644
浏览文件 @ 6565e098
/*
* Magazine sample
*/
function setArrows() {
setTimeout(function() {
var width = $(window).width();
var bookWidth = $(".magazine").width();
var arrowSize = $(".next-button").width();
var magaLeft = $(".magazine").offset().left;
var nextLeft = (width - bookWidth - magaLeft - 60) / 2;
//alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft);
$('.next-button').animate({ "right": nextLeft }, 300);
$('.previous-button').animate({ "left": nextLeft }, 300);
}, 100);
}
function addPage(page, book) {
var id, pages = book.turn('pages');
var element = $('<div />', {});
if (book.turn('addPage', element, page)) {
element.html('<div class="gradient"></div><div class="loader"></div>');
loadPage(page, element);
}
}
function loadPage(page, pageElement) {
pageElement.find('.loader').remove();
// Create an image element
var img = $('<img />');
img.mousedown(function(e) {
e.preventDefault();
});
img.load(function() {
// Set the size
$(this).css({
width: '100%',
height: '100%'
});
// Add the image to the page after loaded
$(this).appendTo(pageElement);
// Remove the loader indicator
pageElement.find('.loader').remove();
});
// Load the page
img.attr('src', 'book/img_' + page + '.jpg');
}
function zoomTo(event) {}
function addRegion(region, pageElement) {
var reg = $('<div />', {
'class': 'region ' + region['class']
}),
options = $('.magazine').turn('options'),
pageWidth = options.width / 2,
pageHeight = options.height;
reg.css({
top: Math.round(region.y / pageHeight * 100) + '%',
left: Math.round(region.x / pageWidth * 100) + '%',
width: Math.round(region.width / pageWidth * 100) + '%',
height: Math.round(region.height / pageHeight * 100) + '%'
}).attr('region-data', $.param(region.data || ''));
reg.appendTo(pageElement);
}
// Process click on a region
function regionClick(event) {
var region = $(event.target);
if (region.hasClass('region')) {
$('.magazine-viewport').data().regionClicked = true;
setTimeout(function() {
$('.magazine-viewport').data().regionClicked = false;
},
100);
var regionType = $.trim(region.attr('class').replace('region', ''));
return processRegion(region, regionType);
}
}
// http://code.google.com/p/chromium/issues/detail?id=128488
function isChrome() {
return navigator.userAgent.indexOf('Chrome') != -1;
}
function disableControls(page) {
if (page == 1) $('.previous-button').hide();
else $('.previous-button').show();
if (page == $('.magazine').turn('pages')) $('.next-button').hide();
else $('.next-button').show();
}
// Set the width and height for the viewport
function resizeViewport() {
var width = $(window).width(),
height = $(window).height(),
options = $('.magazine').turn('options');
$('.magazine').removeClass('animated');
$('.magazine-viewport').css({
width: width,
height: height
}).zoom('resize');
setArrows();
if ($('.magazine').turn('zoom') == 1) {
var bound = calculateBound({
width: options.width,
height: options.height,
boundWidth: Math.min(options.width, width),
boundHeight: Math.min(options.height, height)
});
if (bound.width % 2 !== 0) bound.width -= 1;
if (bound.width != $('.magazine').width() || bound.height != $('.magazine').height()) {
$('.magazine').turn('size', bound.width, bound.height);
if ($('.magazine').turn('page') == 1) $('.magazine').turn('peel', 'br');
}
$('.magazine').css({
top: -bound.height / 2,
left: -bound.width / 2
});
}
var magazineOffset = $('.magazine').offset(),
boundH = height - magazineOffset.top - $('.magazine').height(),
marginTop = (boundH - $('.thumbnails > div').height()) / 2;
if (marginTop < 0) {
$('.thumbnails').css({
height: 1
});
} else {
$('.thumbnails').css({
height: boundH
});
$('.thumbnails > div').css({
marginTop: marginTop
});
}
if (magazineOffset.top < $('.made').height()) $('.made').hide();
else $('.made').show();
$('.magazine').addClass('animated');
}
// Number of views in a flipbook
function numberOfViews(book) {
return book.turn('pages') / 2 + 1;
}
// Current view in a flipbook
function getViewNumber(book, page) {
return parseInt((page || book.turn('page')) / 2 + 1, 10);
}
// Width of the flipbook when zoomed in
function largeMagazineWidth() {
return 2214;
}
// Calculate the width and height of a square within another square
function calculateBound(d) {
var bound = {
width: d.width,
height: d.height
};
if (bound.width > d.boundWidth || bound.height > d.boundHeight) {
var rel = bound.width / bound.height;
if (d.boundWidth / rel > d.boundHeight && d.boundHeight * rel <= d.boundWidth) {
bound.width = Math.round(d.boundHeight * rel);
bound.height = d.boundHeight;
} else {
bound.width = d.boundWidth;
bound.height = Math.round(d.boundWidth / rel);
}
}
return bound;
}
\ No newline at end of file
public/js/modernizr.2.5.3.min.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
public/js/turn.html4.min.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
public/js/turn.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
public/js/zoom.min.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/audio/flip.mp3 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/audio/flip2.mp3 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/hash.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/jquery.min.1.7.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/magazine.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/modernizr.2.5.3.min.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/turn.html4.min.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/turn.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/js/zoom.min.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/svg/volume-high.svg 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/assets/svg/volume-mute.svg 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/components.d.ts
浏览文件 @ 6565e098
差异被折叠。
src/components/Guide copy.vue deleted 100644 → 0
浏览文件 @ e89b8681
差异被折叠。
src/libs/modernizr-wrapper.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/libs/modernizr.js 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
src/router/index.js
浏览文件 @ 6565e098
差异被折叠。
src/views/test/index.vue 0 → 100644
浏览文件 @ 6565e098
差异被折叠。
vite.config.js
浏览文件 @ 6565e098
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论