2014年3月21日 星期五

文字、click、圖像高度互動的模組: jQuery




不要被長長程式碼嚇到。
真的超簡單到不行！

很好用的文、圖、互動組合模組。
全新開發，
更上手的教學／使用程序！


1
 一、互動模組實作範例：

標題
內文中可以針對文字描述設立click然後按一 下就可以換照片這樣文字和圖像之 間的互動就可以有更多的互文性展現





2
 二、教學影音：


1
 一、請將下列 HTML 碼貼入到所欲編輯的地方：

<table id="paw20140320" class="picawo0320"
style="text-align: left; width: 100%; table-layout: fixed;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">標題<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">內文中可以<span
style="color: rgb(51, 204, 255);">針對文字</span>描述設立<span
style="color: rgb(51, 204, 255);">click</span>然後按一
下就可以換照片這樣<span style="color: rgb(51, 204, 255);">文字和圖像</span>之
間的互動就可以有更多的互文性展現<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><img
style="width: 626px; height: 415px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1L1COCecarGMXskSA71u6y1Z_pq1vvaus1JmAX8shE3G9enZfeyilR6ddLQlubaz5bgL1rQV6PpWq4UEX3JJkW1gfmdpJcJK2kLtQeWcgwz4M4iXkS9OdHvwdSmhILZAG0AOBIz0tfE/w769-h513-no/IMG_1326.JPG"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><img
style="width: 48px; height: 32px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZELl7gFvORqmVeoFPde3C4TbOnRr77ZVT4kfxpWBVM0I5NaE-v5Q7g8sepqUDDFNjFri5mZdemwuqGayDlmr74Z_pQ1wkvDk7f68sks6XB28QKdW57utTI3oLWbAGQmsjr_CBCng97A/w763-h509-no/IMG_1332.JPG"><br>
<img style="width: 48px; height: 32px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdCTry_KUWZN79F_t02acALnfgCIAp0WTlTm2L703xUTfuhgCu1AGAIhZL_TE6vlCgmfBuYzmE0bM80RjnpqmYazuhM-Zz3p7LhtaV5DAWFPE33orZ5ukA287L6BxboLepLdSb3FfAvY/w763-h509-no/IMG_1357.JPG"><br>
<img style="width: 48px; height: 32px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijVdvheZ-nQ0rfm0KRlSbLvPZ75YUJllTNMRg6z86STgxGDneApybIiBsdBVaNzzrdr0Oo512NnN46yO-h7ILQYO41RlCLpzWL3OZx0AcBv1TM9BOkZSszVnGHsXFhgYHvUk9wUPbdfPE/w763-h509-no/IMG_1362.JPG"><br>
</td>
</tr>
</tbody>
</table>

說明
  1. 請使用KompoZer進行對HTML內容的快速調整、編輯，請務必看上面的教學影音內容。
2
 二、請將複製下列CSS語法並貼入於<body>之後：

<style>
table.picawo0320 > tbody > tr:nth-child(1) > td {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 8px;
letter-spacing: 0.1em;
}

table.picawo0320 > tbody > tr:nth-child(2) > td {
font-family: Verdana, '微軟正黑體';
font-size: 1.14em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
-webkit-column-count: 2;
letter-spacing: 0.1em;
padding: 8px;
}

table.picawo0320 > tbody > tr:nth-child(2) > td > span {
cursor: pointer;
}

table.picawo0320 > tbody > tr:nth-child(3) > td {
cursor: pointer;
}
</style>

說明：
  1. 【table.picawo0320 > tbody > tr:nth-child(1) > td】這是標題的CSS，可自行修改。
  2. 【table.picawo0320 > tbody > tr:nth-child(2) > td】 這是內文的CSS，看得懂的同學也可以自行修改。
3
 三、請複製下列 jquery 程式碼並放置於<body>之後：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var pawtabid = $("#paw20140320");
var pawidiwant= pawtabid.find("> tbody > tr:nth-child(2) > td > span");
pawtabid.find("> tbody > tr:last-child").hide();
pawidiwant.click(function() {
var indexw = pawidiwant.index( this );
var passpicsrc = pawtabid.find("> tbody > tr:last-child > td > img").eq(indexw).attr("src");
$(this).parent().parent().next().find("> td > img").attr("src", passpicsrc).fadeOut(5).fadeIn(1000);
});
var picoring = pawtabid.find("> tbody > tr:nth-child(3) > td > img").attr("src");
pawtabid.find("> tbody > tr:nth-child(3) > td ").click(function() {
$(this).find("img").attr("src", picoring);
});
});
</script>

說明：
  1. 置入程式碼後，效果就會顯現。
  2. <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 這條（紅色字部分），如果你有用別的互動模組而使用到，就可以不用再寫入了。一篇文章中有一次就好，請保留最前面的那條。
4
 四、一些同學所碰到的問題？例如按下字但圖片不會變化…

沒有留言:

張貼留言