2015年8月31日 星期一

上傳圖片時取得圖片解析度

若需要在上傳圖片的時候,得知圖片的解析度大小,可以透過以下方式:

<input type="file">

$('input').change(function() {
 
    var obj_url = URL.createObjectURL(this.files[0]);
    var img = new Image;
   
    img.onload = function() {
        alert(img.width)
    };
     
    img.src = obj_url ;
 
});

2015年8月26日 星期三

跳出下載視窗並停留在同一頁上

透過window.location.assign('url'),其中url為檔案下載的連結,作業系統會跳出下載視窗,使用者可點選下載或取消,並停留在原先頁面。

2015年8月23日 星期日

動態載入頁面

如何保留導覽列又可以將內容切換至其他頁面?介紹可以使用JQuery的load()來達成。


假設想讓原先頁面裡的div區塊(id="page_classroom")取代成另一個classroom.html裡相同id的區塊,使用的語法如下:
$("#page_classroom").load("html/classroom.html #page_classroom > *");

如果想搭配對應的js檔,可以再加上getScript()來達成:
$("#page_classroom").load("html/classroom.html #page_classroom > *", function(){
$.getScript("js/classroom.js")});

2015年8月17日 星期一

[CSS] 水平垂直翻轉

若需要將一張圖片水平翻轉(左右對調),除了使用繪圖軟體去將圖片做轉向外,也可以透過CSS方式來達成。CCS語法如下:

.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}

垂直翻轉也是一樣
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
}