1. 程式人生 > >重溫blame!——用html+js寫個漫畫瀏覽器

重溫blame!——用html+js寫個漫畫瀏覽器

世界那麼大,周遭卻很擁擠,也許只有思想的馳騁才是最有張力的延伸。
心血來潮的想重溫blame!

1、下載《blame!》

先寫了個python指令碼從某個漫畫站下載到了10卷的合集:
10個分卷的資料夾
圖片資料夾內容

2、沒找到合適的圖片瀏覽器

開啟圖片夾,卻意外發現我的windows下竟然找不到一個稱手的漫畫瀏覽器!
我的雙屏顯示設定是這樣的:
這裡寫圖片描述
win7的照片檢視器下看起來是這樣的:
這裡寫圖片描述
而看圖專用軟體acdsee的全屏檢視下看起來是這樣的:
這裡寫圖片描述
其實對我來說問題都是一樣的,圖片橫向沒有撐滿螢幕,白白的留了個黑邊;圖片瀏覽器確實可以對圖片進行放大,但是翻到下一幅圖片時,圖片尺寸又回到原始尺寸大小了,不舒服。

3、還是自己動手吧

1)程式碼:新建一個html檔案,填寫程式碼如下:

<html>
<body style="background:black;overflow:hidden;" />
<img id="img" onload="adjust()" style="width:100%;position:aboslute;" /> 
</body>
</html>

<script>
var base_path=prompt('請輸入圖片集的路徑:')+'/';
var current_page=prompt('請選擇從第幾張圖片開始觀看:'
); var o=document.getElementById('img') o.src=base_path+current_page+'.jpg'; //mouse wheel event handler var onscroll=function(e){ var direct=0; e=e || window.event; if (e.wheelDelta>0) { current_page--; } else { current_page++; } o.src=base_path+current_page+'.jpg'
; } //put the image to screen center var adjust=function(e){ o.style.paddingTop=(document.body.clientHeight-o.height)/2; } //bind mouse wheel event handler if(document.addEventListener){ //w3c document.addEventListener('DOMMouseScroll',onscroll,false); } window.onmousewheel=document.onmousewheel=onscroll; //IE/Opera/Chrome
</script>

2)使用效果(Chrome下用F11全屏):

引數輸入介面:
選擇目錄:選擇目錄
選擇起始瀏覽位置:選擇起始瀏覽位置
漫畫瀏覽效果:漫畫瀏覽效果