jQuery/jQuery Mobile 技術文件 》(持續新增中…)
jQuery 支援HTML元素的動態屬性調整,假設有一個標籤如下:
以下為存取此標籤 src 屬性所需的語法:
第一行取得 <img /> 標籤的參照並調用 attr() 方法,設定其 src 屬性指定所要呈現的圖片檔案,第二行取得 src 屬性。考慮以下的範例畫面:
這個畫面可以顯示兩張不同的圖片,當網頁載入完成,會自動顯示第一張圖片,使用者可以點選下方的小型圖示選單,以切換所要呈現的圖片。
jQuery 支援HTML元素的動態屬性調整,假設有一個標籤如下:
<img id="cimg" />
以下為存取此標籤 src 屬性所需的語法:
$('#cimg').attr('src','images/myimg.jpg'); //設定 src 屬性
var imgsrc = $('#cimg').attr('src'); // 取得 src 屬性
第一行取得 <img /> 標籤的參照並調用 attr() 方法,設定其 src 屬性指定所要呈現的圖片檔案,第二行取得 src 屬性。考慮以下的範例畫面:
這個畫面可以顯示兩張不同的圖片,當網頁載入完成,會自動顯示第一張圖片,使用者可以點選下方的小型圖示選單,以切換所要呈現的圖片。
首先於網頁配置如下的內容:
這是一個空白的 <img /> 標籤,識別 id 為 cimg ,現在於<script>區段中,配置以下的程式碼:
其中於網頁載入完成時,調用 attr() 以設定 <img> 標籤的圖片來源與呈現寬度。回到網頁配置畫面下方的導覽列:
其中註冊 click 事件處理程序,以回應使用者點擊圖片的動作。以下是 click_handler()函式的內容:
其中取得目前圖片的 src 屬性,將其重設至 cimg ,以達到大圖的切換效果。
jQuery/jQuery Mobile 技術文件 》(持續新增中…)
<body style="background-color:black;">
<div>
<img id="cimg" />
</div>
</body>
這是一個空白的 <img /> 標籤,識別 id 為 cimg ,現在於<script>區段中,配置以下的程式碼:
$(document).ready(
function () {
$('#cimg').attr('src', 'images/IMGP0811_l.jpg');
$('#cimg').attr('width', '460')
}
);
其中於網頁載入完成時,調用 attr() 以設定 <img> 標籤的圖片來源與呈現寬度。回到網頁配置畫面下方的導覽列:
<div>
<img style="margin:2px;cursor:pointer;"
src="images/IMGP0811_l.jpg"
width="100" onclick ="click_handler(this)" />
<img style="margin:2px;cursor:pointer;"
src="images/IMGP0818_l.jpg"
width="100" onclick ="click_handler(this)" />
</div>
其中註冊 click 事件處理程序,以回應使用者點擊圖片的動作。以下是 click_handler()函式的內容:
function click_handler(o) {
var s = $(o).attr('src');
$('#cimg').attr('src',s);
}
其中取得目前圖片的 src 屬性,將其重設至 cimg ,以達到大圖的切換效果。
jQuery/jQuery Mobile 技術文件 》(持續新增中…)
沒有留言:
張貼留言