tag:blogger.com,1999:blog-41797193549809184812024-03-20T14:03:33.571+08:00李明哲老師多媒體互動寫作教學走進數位藍海,勇敢踏上時代的浪頭!M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.comBlogger202125tag:blogger.com,1999:blog-4179719354980918481.post-40182320018945669172020-12-16T17:14:00.009+08:002020-12-16T17:19:05.472+08:00使用CSS來達到click效果
<style>
.middletitle {
font-size: 195%;
font-weight: bold;
letter-spacing: 0.1em;
width: fit-content;
border-bottom: 1px solid gray;
font-family: PMingLiU, serif;
padding: 5px 2em;
font-style: italic;
}
.littletitle {
font-size: 117%;
font-weight: bold;
letter-spacing: 0.1em;
border-left: 1em solid black;
font-family: "Microsoft JhengHei", sans-serif;
padding: 0em 0.5em;
line-height: 1em;
}
.blackspan {
font-family: PMingLiU, sans-serif;
font-weight: bold;
letter-spacing: 0.1em;
}
</style>
<br>
<br>
<br>
<div class="middletitle">使用CSS來達到click效果</div>
<br>
CSS的功能中,目前並沒有click這項互動的功能。<br>
<br>
我們往往要使用javascript來達到click這互動功能的創作。<br>
<br>
但如果你想用CSS來達成click這互動動作的功能,還是有一些方法可來模擬出來。<br>
<br>
<br>
<div class="littletitle">範例演練</div>
<br>
<b><u>CSS語法:</u></b><br>
<br>
<style><br>
input#test1216:checked ~#testchk1216 {<br>
color: red;<br>
}<br>
</style><br>
<input id="test1216" type="checkbox"><label
for="test1216">請按我產生互動:div字變顏色...</label><br><br>
123<br>
<br><br>
<div id="testchk1216" style="border: 1px dotted gray; font-size: 1.2em;
font-weight: bold;">這裡是要變化顏色的字<br>
</div><br>
<br>
<u><b>語法效果:</b></u><br>
<br>
<style>
input#test1216:checked ~#testchk1216 {
color: red;
}
</style><input id="test1216" type="checkbox"><label for="test1216">請按我產生互動:div字變
顏色...</label><br>
123 <br>
<div id="testchk1216" style="border: 1px dotted gray; font-size: 1.2em; font-weight: bold;">這
裡是要變化顏色的字 </div>
<br>
<br>
<div class="littletitle">語法說明</div>
<br>
<input id="A" type="checkbox"><label for="A">文字</label><br>
<br>
這裡是指,你對label所做的動作,就會等同於對input的動作。<br>
<br>
所以我們在【文字】上click,就等同於對 input 進行 click(checkbox產生作用)。這中間是用 for 以及 id 來連結起來。<br>
<br>
再來我們看CSS。<br>
<br>
input#test1216:checked ~#testchk1216<br>
{<br>
color: red;<br>
}<br>
<br>
當 input 的 click 動作被確認時(:checked),在其後面同層的元素中如果有 id 是 testchk1216
的元素(~#testchk1216),此例是 div,則會產生字體顏色變化(color: red;)。<br>
<br><br>
<div class="littletitle">再看另一範例</div>
<br>
<style>
#testchk1216b >div{
height: 434px;
transition: 2s;
}
input#test1216b:checked ~#testchk1216b >div {
height: 0px;
}
</style><input id="test1216b" type="checkbox"><label for="test1216b">請按我產生互動:圖像變
化</label><br>
<br>
<br>
<div id="testchk1216b" style="height: 435px; overflow: hidden;">
<div> <img id="testchk1216b" style="width: 100%; padding: 0px; border: 0px solid gray;"
src="https://images.unsplash.com/photo-1607858413180-acb5d6ce2627?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
</div>
<img style="width: 100%; padding: 0px; border: 0px solid gray;" src="https://images.unsplash.com/photo-1607858378133-fd4d6f7118e6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
</div>
<br>
<u><b>注意:</b></u><br>
<br>
要變化的元素,一定要放在input的後面。才會有作用。<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com1tag:blogger.com,1999:blog-4179719354980918481.post-18272441286630036452019-12-07T14:59:00.004+08:002019-12-17T13:37:31.658+08:00BlueGriffon軟體使用及基礎操作<script>
$(function() {
var divwidth1208;
$('div.divmo1207').hover( function(){
divwidth1208 = $(this).width();
$(this).css('border-bottom-color', 'gray').animate({'width': '80%'}, 250);
},
function(){
$(this).stop().css('width', divwidth1208+'px').css('border-bottom-color', 'red');
});
});
</script> <style>
.midti1207 {
font-size: x-large;
font-style: italic;
padding-bottom: 3px;
padding-right: 2em;
border-bottom: 1px solid gray;
}
.imgfix1207 {
width: 100%;
padding: 0px;
margin: 0px;
border-radius: 0px;
border: 1px solid #999999;
}
.divmo1207 {
font-size: x-large;
font-style: italic;
padding-bottom: 3px;
padding-right: 2em;
width: fit-content;
border-bottom: 1px solid gray;
}
.divmo1207x:hover {
width: 85%;
}
</style> <br>
<br>
<br>
<span style="font-size: xx-large; font-family: "微軟正黑體"; font-weight: bold; font-style: italic;">網
頁圖文整合寫作利器</span><br>
<span style="font-size: 5em; font-family: "Arial Rounded MT";">BlueGriffon</span><br>
<span style="font-size: x-large; padding-bottom: 3px; padding-right: 3px; border-right-color: green; border-style: none none solid; border-bottom-color: #666666;">★
免費 ★好用 <span style="color: #ff6666;">★</span>建立數位文本寫作基礎能力</span><br>
<br>
<br>
<br>
<br>
<div class="divmo1207">本頁課程綱要:</div>
<ol style="padding-left: 1em;">
<li>下載、解壓縮、啟動軟體</li>
<li>調整軟體使用介面設置</li>
<li>建立上手寫作的CSS預設語法</li>
<li>使用軟體寫入inline style的作用</li>
<li>建立及使用class 以及 id</li>
</ol>
在我的教學系統中,請同學先學會上列的各種設置過程以及操作手法,這是要流利使用BlueGriffon來書寫數位文本的基本動作。<br>
<br>
<br>
<br>
<div class="divmo1207">下載、解壓啟動</div>
<br>
<br>
<u><b>下載:</b></u><br>
<br>
【<a href="https://drive.google.com/open?id=1gU0mYzYaXnL6cfhR1MPBytQ3NkaCk-9d"
title="下載軟體">請按此處,來下載軟體,課堂用</a>】。版本3.1。這是免安裝軟體版,可以將整個資料夾都copy到隨身碟,帶來帶去。每一台
電腦就都可以使用。適合學生到學校使用 任一電腦。<br>
<br>
你如果使用自己的電腦,可以下載 install 版本。直接安裝軟體到你的電腦。【<a href="http://bluegriffon.org/#download"
title="官網下載處">下載處</a>】。<br>
<br>
<img src="https://lh3.googleusercontent.com/6dG5REiwBa_rngRzJw7SX7NSjWxmaN7jIctgz473YBYYTykb0DVxIL8LC9h3_Qw51J-5vsXHIJH6wLprU6SL9NFF1lyc2nDGa2HK8RKcF__wKyHPENk81f6qcp9aCToLWN5yqJXGDFcz0kiSB8fpUkZrmD_3BZKmRMMGT1cvAKrtbxVLzaXrpXBEBRojKhKtwrayJnnxddbg7abFSZajzbaYhDcLmv7z2SqPOIvY71QYhDBnR6q1T3fuIax7N7GAAriOqGpuogE2T9k0ZnmVQITTH_JCD-f-3k7IQU7sUiGy2oKa0omQqgD42AXR1baFQs17OA6Uvqsu1YOXF3QvPMV86s6v6YTnrRe7xdAcWdivKPGwQn7DIMn-PTeDYz_SezdnrLG98icQg-QqknO4LckGnw0ao4qhCSS7IjHddDcrq87en2o9hguIYFMkTwxfCnCZyGSKpoyg7p4QVECrho1JulYopKYfHJF6ympFoZpuHa9u2cyiaqoVDc6hI7CHakbxZUOs3q-HCVeR_G4yvwGigT-ri-OzeS04V8_oBbR3ObaLdRJFIf_TkQwJ9YpvB3_LDGLwUBdcqA7--OMjPUFXGo8X_aaaf6ETTFf7ywcyhdxOYnOB7PXXjPh5-HGRc9COgiQsaOCDiU81X97jn0e9TiEoFHLAB7Kci_740kkteHiZYBtX1AY2ALMB00APiANZpndzKkHb5Xj4Xj_TMve1S5NKADwZsNU8N9YS8E6VsoErTw=w1171-h685-no"
alt="" class="imgfix1207">說明:<br>
一、紅框1處,是直接安裝到電腦的版本。<br>
二、紅框2處,是免安裝版本,直接解壓縮即可使用。<br>
<br>
<br>
<u><b><span style="border-bottom-style: none;">解壓縮、啟動:</span></b></u><br>
<br>
一、在下載的檔案處,按滑鼠【右鍵】。<br>
二、在〔解壓縮全部(T)〕處,按下滑鼠【左鍵】,即進行解壓縮動作。<br>
<br>
<img src="https://lh3.googleusercontent.com/nopxJi04I-_h2WWedpzN57c4RjCfMSMiOncQtj9U9eMOq-wVM6ke41wD7Lifw6Gm-h7WNMKiXCNmWKMtIdpGVnxshGKnV5KDE3q1HiRUsY3pV2ahxCSH8shHZgjmFSVdpMl3ZKTCvR7D4zjaG-N93DrIh7vYQozcb84X15QL5ET4VBqBFsV6CoOIbk5QKwPf6UFGGLJc2WsJ10dQGG8fwMh_nfzfWYq7zzN09vW5mFixeskaGMlianRpeRRYvC--eHzgtk5kcgyyJHjqc9lbUmlUMic0bPoLByYrAK7XttuUMfODGc79hqLOoBq8XSrV4KRNaqWP_XwWXJVMkqlqvx41BymOGF_C9kjnBU4p8YOPmROMLwyEMufgPTxbGxy7-RkX-zFVaiZEVrHUN907GKT9zUauqx6Svga-7xWsCJ05QoWDtL0nSBZtovCgko1imW5IGbyDUQodvBGOJ1UbfihHqAZl9qAh6JlE24RARhBhdJOQ4BJfL5kCYm1f6eTJFmUPkbwmAPwGq23b6mSrkaC1NhSvN_ZtfTLbeLCGSgsD4b8KaoN6VXnMeV4fC7FmWJljxyBGAtmUnrqe08CZn93RICVtsNBT4jX4W_imMjx6Dm4KTPBHPDjBItFXbsiDSvojaezjbABxFcphCg9col79_2qn20u3fdgX48PEeq6gprF4TiYJ4PDBvsouwT7SbXcU0bKJHV7bRTlfgkgv5-WNxTZ6vIm3AiFt5uCW1cZniyGPlA=w843-h428-no"
class="imgfix1207"><br>
<br>
三、在出現的視窗,按〔解壓縮〕<br>
<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH16UWS63W03HiUMarGOqYTFAFVj_7zZ3BXQrCZlwy8ktgZ4y5SoU8dk6ungzuWSovMJMK7H2Y_901fwVpyrcEnTru3ZzIZfQHSv5HsENTHOuVQj9LD2OSg_0_AVzbSJ_MV5JrPEaAdsU/w837-h599-no/"
alt="" class="imgfix1207"><br>
<br>
四、解壓縮過程結束後,會跳出目的地資料夾視窗。對〔BlueGriffon〕資料夾按二下。<br>
<br>
<img src="https://lh3.googleusercontent.com/7JSY5uRd67L5PYv6jR7TDs-OeOA2S2F_t-QODTVETYO_UKXp9rVnFdUG4VO_Xv13hoo5lEP8ZBfxU9XZeAsNRNa02dLNakXnENGh9Pq604ct8Onrl76J91NfkKXcjrnLkAJ7ApveBI9B6CF_SOzd-EXj5HSc7khzQhgu9xKk415Jwj9xPoDV-O5MUzxqK8gkvvj-Nd2_I2zsvY0d3ocSZpO5sMtHEdiMa18m0ButWKQ0n5NTWFVD9IR0eTdCL0gwePuxWabr-q3q_ssOUMhO5WqMwxkpUnpCAQVD0Yalz7bkvAM12MG56USftGj5nfxomZ8ReiICYh3B9HjasD-m66v5f3dv4KR1vYZ4_VADOXMol806lfMdwGs2TyoMEyB8bmOt6N97hM0VmbyOO15uwzwFFC27BVBLZkfuvuyo1i4F4nfg0FXya_zxMDk2NWqqQ0XXpDFAaYyZZK6S0jdeTJLgtW3cqyKxajzZauHNbtTMm04JnqrDuczslUYrmu3p2pdyacQkTxylpEStdGwUAdpsCSXgGpA9pZ6hiuSXMc1k7vWDFBnYdVLVbPC1YZPt9kxmfi0CoDGUUs9NQlfnyh2ZKzHGSDXkSl7DOqbDJi_o4vd7B0B40Ll1v_-quHKvDq7JgRcq9xDh55OPFwjOeXsbDkefZhELrl4SviFedas9tOeH3NzhFFGBUlOY5N5Mo8LXpDy5Lxb35w4ZPLrRs6QOA9tKqTuuN3PVgle0cMgKskzlsA=w797-h390-no"
alt="" class="imgfix1207"><br>
<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2qyPpSwLErjEewyaozBuCxsHQa6f0E_JhekZcvWwyWQe97B3-dOyf4-OGDrZeA_1ymj041jL24eulO8Kc8U-F-UYGrqUW8PXLT35kdtHGOPF18oDpr61gFjTXnUkEQC5CXkRwxcGLdLQ/w759-h424-no/"
alt="" class="imgfix1207"><br>
<br>
五、在資料夾內找到所要的程式,即〔bluegriffon.exe〕這一應用程式。按二下,啟動。<br>
<br>
<img src="https://lh3.googleusercontent.com/xpimtZDDnpnlC4Ddp9hyfi8p8VzGRUBkVIGv_FzYPRuBDvP57Vo1G3KB1Uij8Tb0awEYHsOdzOzXEkofvzjAhoClbIdSVn2ARlZ1-AsoA93NU7_P_CnLbjGfc7G_WSqywiRDLhnj3H6-azKq7DGKbihqy6wm8dZGKhM2bMrrT_e5rM-TQp0jSTN9PKYjEwtK4TLeGK4tc2wlhzXatVIbns_iwF3BkosbuQZ5qYmIgvaxLa393YcMxA9v4j-f0vAg3O4PifUsasJBBn3dTHoGcOwAmoBsgFCnb_H5pVDXrACcWSOsB8rdQNFaskxiH5fIz-tPvnR7Bebl5DlLjcqz6bNhN6cRjZDLvdCTF8GmAnDRXA7s8G6LiYjigM_YOP7VRkcedVKXOT56OXIv9R8csdhVI_D0bgiwE6QFW_POpROMp8xYMbaijqkzDjILtXPslwOr8ZOAdp7wxNf2xpl8E3LayhuodAUs7lVXJF8yowD7qFkKNe5vO_k4F97FzLzi94jnYiMoL8dqI8b6SqyL2FYElPxR93QDjwphBq32frXbPkMqjyci91J-5UwV6YS2IFs_FfzttPqejeBmAmW-dDC-wLChXwZ-mxboAMyiJgZTAaPXtZ3sfwS8K9h_E3kNYsgQ59gulGfJ22FDeTcXQb-3NNWPFyng3d3ftZqfQrEAzsPMcRoY4FlTu2YaxMchrjBgnbuehGHuB-k__B9ZHyqSDopgp7JmAMrPTUlb8u6q2TwVFg=w767-h364-no"
alt="" class="imgfix1207"><br>
<br>
六、BlueGriffon的介面,就是如下。<br>
<br>
<img src="https://lh3.googleusercontent.com/xIy6BvRPVNv6Ab1FjskSzW1L-NnLRQEeNKhw0KKEIP2K_J1F1xTO8YujiX9W2WxxQtKnNrEv8AVlt45_PL4KWF8ibEUY5NytTvAlgC7Dm4ZRNcderJekgnvsORbcjb0DJKBh6tiPjxr5ds-gyaKdhXJ6J0YWzMMKmKESi_R-YwsHR3zV_DlC5u600XL66IjpUFigBUyB1vCgcCb4fsVhEPbc1IjFKOXqmJ92hjvR7VQg2gpfAl-Uf6xLg4tbc9VpypkoYYelHxKJga7rJuTlo4V0SbI0Ssm35YIRBMIRRuWNsz8Wyayu6f2B0lAPc-z-woZZyYgv8bljtW6du3IcBLlzXUcbqQKf53MD-lKXox6y2kqyNg_h2f0_7oPUkrpZWuIuR7GT947hQmA5-HmhXNotwmxFRfzQSewNuZOhgQVUTB1zgp0jKebD_tTRUtGe8-5yb1YtgY4owpgAwYKZYL9VjpsRN9ndOTO7CbqL4Xzv2K8Fnlgrj-LTY6Q4ZjGJ1BOg-gBsQ6tsOAfW7nUaKvKKQd_ydLENk9X5wX8Kh9SAcNINHFXJv2MF_YDjgBt5LIDOr1wt3KiTWClv7CF9hI9BCwPjYmXvTUizedcu-Wz8L97_2s8jAFco9G27cm4v1HmfiT9jJupSP70bxLYlpgMaOGtytSE_i2nyd6KJYo6Kfp-fjoStk70mlS4sGUtSLAl6-mcggNLw6-pj59GPcAnz8TqwGSUzhjvfbpMUVgtdemLDWg=w1392-h833-no"
alt="" class="imgfix1207"><br>
說明:<br>
因為每個人電腦的設定不同,所以畫面可能會有一些不同,但不影響。往下,我們會以影音的方式,來說明如何進行使用前介面設置,以及最基礎的操作。<br>
<br>
<br>
<br>
<div class="divmo1207">上手寫作的預設語法<br></div>
<br>
請將下方的CSS語法,Copy 到<head>xxx</head>之間。<br>
<br>
<br>
<b><u>預設的CSS語法:</u></b><br>
<br>
<style><br>
div {<br>
border: 1px dotted red;<br>
}<br>
p {<br>
border: 1px dotted blue;<br>
}<br>
span {<br>
border: 1px dotted green;<br>
}<br>
/*寫作完成後請刪除此部分*/<br>
</style><br>
<br>
<style><br>
body {<br>
width: 800px;<br>
margin: auto;<br>
border: 1px dotted darkred;<br>
}<br>
img {<br>
width: 100%;<br>
}<br>
</style> <br>
<br>
<br>
<br>
<div class="divmo1207">編輯軟體操作介面設置</div>
<br>
一開始,你的介面設定未必和我的一樣。<br>
為了教學上的方便和一致性,請你先跟著我調整你的軟體介面呈現樣態,以流暢整個教學學習過程。<br>
<br>
<br>
<b><u>Tools(工具)/Preferences(偏好)</u></b><br>
<br>
一、請先到Tools(工具)按一下,再選擇Preferences(偏好)按一下。作用視窗會呈現。<br>
<br>
<img src="https://lh3.googleusercontent.com/_YoRJZG01M0e8MCUjE_ua8gmmb0Nu1lnjSmJxh-kIAOe4F3hX_nFCa8ZSJGdxo0eYC3IXfCku42R6zTMpT7JtWUtSdO1ssh5U92dQOCBOcVAIgXC8nlZt8bpHs6frGi2mJiLjkUPbixVbO52UJUY2FRDDrQEnFJIKz8tWDKSeU5gcdAU_43fT-JJIubSE9cM9RK9LQoA4GtuZZ2RLj7Yrx2oxfKlpfOGM4Q4cpUtsopfixMhktWFyl1WWxh-bnOsg5IprFFbyQXELJ3h8a99QKcEL8tIq-v6uxkMZHdGLvvJyENTHkXEg2aTZEtJqc2lvQ-xE5uVbSHHBeO_zUfaaadFEpbK6k7OSMhp0b_ASNWhYDj0LGmFHSSgfVOFmEt4SrfOwVUiOupKPicnvqcKC5VzOikIyrgEX4uwM7m1yLM2ONzVJAQcvaicKlNe_FnP1v8IT5LfQ_PfDQjYWRmBJRSDsl6cbwm9BZ6kzaFnOfRg5LHdtBcGTH5F4byRKv4XMm5ZJT4CvsVBIw5tVX_itZt0gjhYWJe9MySKZ0QOK0apgwsyEPB3GLlvRL6Rr2I44uBLdw4hp4pQKjb2hnyuXDvoZYarqMhF2x21BI4dUsIGZ-QcucfaTUSA4QWSrFlGBzzqs5NKmuw1lD6qYNwncUKYgMafVKdqCu2v472ijdMwIbfQyM9ZVSRnwvnTusQI1vOn0MUsmXvi73XNwjMJlBMmeqkRfYQNOSxh3uDBjfObtdEu4Q=w872-h421-no"
class="imgfix1207"><br>
<br>
二、在 Preferences(偏好)視窗中,選擇 Advanced 項。選擇所使用的語言。<br>
<br>
一般是使用你電腦系統的語言。但在我們的教學系統中,一律使用英語。<br>
請按選〔Use installed locale:〕,再選擇〔en-US〕 英語。最後再按下〔Use language〕。<br>
如果你看得到繁體中文、簡體中文等其他選項,你也可以依個人與趣選用。<br>
<br>
<img src="https://lh3.googleusercontent.com/rW2C7euNdk3YvgyqGPl2OemIZJGZx5SDs8N9afADxBxSDuGRDbeNx46D8m1FbVFWPW6J5vZMoJDxz3xJQ_n3663ezDABdjWWOLuSTe7EOfJBG22jW_myfJMwvw95tRPJ5zhxgBNkzWCOzaOZ_p0gVI82LZNw1UaHmXWrcz90FjOpGYFpROKTRO8pOi6zQCAf1gpOItUWFVKPkaq8791iptmqbR7wz1yXbFstyh-vKcBA2CrbWf1qjqi6atHpn8MuPreErNX3MXgKBZDFAzX9XpqZNGq9Kq-SR5c0apMtxpdPuHadK0Wy0ZTRZGmxOv2x4_ixbsgGDJbJn5JXoVU_Ncq1mWOkNrfk67ZePLqvDND3H79-OndNyPZb33T6KWYNYRe0D99ZL6W67GdbfCZC0oZ9frCnQVROmJG6fzPEA4l4vxNfh9utqJiddnvZBouRyQFBpfNLyo956XT8jr1JgaRoGbo4Oet34WdnMJOuK53oWmqSztXBw2ETTeC6dnAEbeTIhGjKl2HjwRHiqfK8hmw690iwhsGaMfAf00UdqiXt5l0tkwaub6zXS2Mdi2anKqUmuuTZW29TrFNCQaQ0tQ6RGvJ16gpBP-fDAMzEwChN4fwiEQuKF-A6r6f-MLo4PHUue-HRMg3bWQaBl3fc_ItUmET3MSHV28LySNnxnA-bHcfiaRILLuOENHTBSGArev_np4AyBTKyApZTlzY9YRzRygtRJvZkrB1TCRTw4H6fOtiUbA=w922-h834-no"
alt="" class="imgfix1207"><br>
<br>
★注意★ 按下 Use language 後,畫面會消失一陣子,之後會重新再出現,這時你所選的語言就會被使用了。<br>
<br>
三、重新在 Preferences(偏好)視窗中,選擇 Documents 項。再將〔Return Key in a paragraph always
creats a news paragraph〕這一項,關閉。也就是把「打勾」符號取消。<br>
<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvM0zp7JCP0ndpmDctj9zCLvhMdoUNx32-PVKr-oCACo_HmfqRzy_KrEa9EpjWOtw0iwyWj1eU_yzhVvVrkjEkjhHxoZFzLBpQ5ReRNjUvW510S2GdGABw3QwwtuTeumwHBkBhwqTsXP0/w934-h834-no/"
alt="" class="imgfix1207"><br>
<br>
四、繼續在 Preferences(偏好)視窗中,選擇 General。後續,在 Theme區,選擇 Black。畫面會變成此教學範例的色彩配置。<br>
<br>
<img src="https://lh3.googleusercontent.com/CuqB7ismkPZnyvavPcd2p3s78geB7zEwu1yv0pxvF5gy16Qusb8EdroCvOkLix_a-7xlesy5NUZo9JFaE6gpXzQsKiduCMoSaGkIdbW3cUXamkbPd1V1TJtFu6feIlzvPGgfQ4tR7uFzbOqiLuqNASs5Qmu3YZJ1S7toWtKngBxXgvMXIjiP4m8LlnPtjFqoskN3hNaxVRmpSrN1IDFSh0xLD55PnzvB6wtj6iw6y7kZEjkZGbTU28ZWR-0wO7KDT1iejzQSyBVCk2fRoRriXWx5eiIaGoncfWS2rKnRxCUEeiEG5_LNVWSuU6-EOfAktrfJiLBPuJSw-xTnwhw7AMmRTZIy7FJi1xfBD6dkPjCCSgID78sWCpl79Rr1iw6RNCYJ7tLYz2oxjdUkki2Hs3U5S9oJ1_TLAKICZbcLE-_qLxmQfb_PSYfZ8kQqt5JoIka2ETJ3gKnYGOPos2hG8IVqAbBHad4XDNj3NUFgvaSY8hiVOACFvpcodknuN6nLwdGcbZhZQc9hLjUpSOx6-luFR-RZj0YtqwqKBwTKxCxziMFMlXYPQ1ppiPcj1-rxnG98A1EFVX8G0dukhWklHB54hDWqMQb5OYINXzYIKr-j-Zodlge3292ru1BUY2Y1zHnElDhsXaiz7nnf7hbg-CgHaSAVGhCszxDYzgK8tYCjcbNR6HQmPHXsX65cJaQhqLggsElTyLuWFaAMJrB1TyVqz_sCfPM5BitlqNxbI_A6zaLQGg=w932-h834-no"
alt="" class="imgfix1207"><br>
<br>
<br>
<u><b>操作面板的設定</b></u><br>
<br>
以下的三個操作面版是常用的,也是教學系統中一定要在軟體中呈現的。<br>
請按下Panels,再依續完成三選項。<br>
<br>
<img src="https://lh3.googleusercontent.com/E0dfUwnBAaae3F8TLLzkvXr-t6hll_xpBNdeEG6V_LK_u8RGJShUMKnn2Ly5YQL1VftDfDLAbAW9IgrIxGOJbjet5xCVtaCXyh6rqFU6L8B3WD2O6YgdmxXQK0_fRYZqo253wumnBIQ_jpEFwsmQjJ16DNnYVJyf8MwXD0jxSKKX8Ay0toIllyAFs9jfHO4tdPnJKhKauN5FqSCpJiUPuWSem_b26kzsW-IBE0nGYiYWc3jY_5Ln74yEDJkHTLVupoLmrGPC8t7zigAVhSFXX_fU5uKwMZMbF1aZByGaYhjqCZoya6sYiR00nyqnOMMxFlEm16isYku14KxzqNF8KjBLZeDPZrf8O1q81_HbVq6a6QYa6CjLQfH-0x8X9kiwAIp71IZbu7YRVZF7d_-ovSXMGE3Q4fiGuTcl8BY8oK-fdjXu7_gt0iU_sY5lL40UTmy7h3sgOrXzhq360o2C7oh7dgVxjb05b89e6eFfW_rZMtcIK5NxmDHv98LF2ldquQaXfQvD-aurGbpOctmX32mwGUqp3VlOkDENJ7oKWxiH42LlOqz9ea8UgkH6SS4SBKZ9-FJwlg7A1ZDAQR8aCCmSe0SduANXZJVOhqoJUvat1y77tF8CvX2u_O35qBTqY-TmiAfeMtFM4bTKtDsp6JpcZu7jEr8PnbG6Jg0Pv8EuRZ1lkaGNblGl9YgigowauClQj7TVKRi5i07N64vUPokvjnxR8yp6r6PjA4Wks0JD_UQKcA=w863-h497-no"
alt="" class="imgfix1207"><br>
<br>
<br>
<br>
<br>
<div class="divmo1207">基礎操作及使用</div>
<br>
請看教學影音介紹。<br>
<br>
後補影音。 <br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com1tag:blogger.com,1999:blog-4179719354980918481.post-71262067229429236422019-11-23T20:05:00.002+08:002019-11-30T21:29:01.862+08:00最具親眼性的區塊圖文佈局
<style>
.col20191123 {
column-count: 2; column-gap: 30px;
}
.col20191123modi {
column-count: 1; column-gap: 0px;
}
.bigtitle011123 {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.03em;
margin: 1.1em 0em 0.75em 0em;
text-align: center;
}
.bigtitle011123modi {
text-align: left;
}
.bigtitle011123modicenter {
text-align: center;
}
.bigtitle011123modibig {
font-size: 14px;
}
.bigtitle011123modiblack {
font-family: '微軟正黑體';
}
.wordtitle0324 {
font-family: Verdana, '微軟正黑體';
font-size: 2.8em;
font-weight: bold;
line-height: 1.1;
letter-spacing: 0.1em;
}
#aaa011129 >span[style*="font-size: 14px;"]:hover {
background-color: lightgray;
}
</style>
<br>
<br>
<div class="wordtitle0324">每次都成功的區塊圖文佈局</div>
<div><b><big>網「頁」是由「區塊」組成的。</big></b></div>
<br>
<p>在我的教學中被強調的是:數位文本寫作中,網「頁」是由「區塊」組成的。<br>那麼對進行內容的填充,有沒有最基本的「文本佈局」,可以使得最常見到的 「圖文區
塊」都具有最可親的閱讀性呢?</p>
<p>有的!</p>
<p>以下,提供最基本的圖文區塊寫作最常被使用,最可被接受的圖文佈局模式。<br>共五步驟:</p>
<ol style="padding-left: 1em;">
<li>圖像</li>
<li>圖說</li>
<li>大標題</li>
<li>文章開始中標</li>
<li>內文(可以分欄更好)</li>
</ol>
<br>
<br>
<span style="font-weight: bold; text-decoration: underline;"><big> #範例#</big></span><br>
<br>
<br><div style="border-bottom: 1px solid orange; border-top: 1px solid orange;padding: 2em 0em;">
<img style="width: 100%; height: 190px; object-fit: cover; object-position: 0px 70%; border: 0px; padding: 0; " alt="" src="https://images.unsplash.com/photo-1574248124380-a8c9ba607eb8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<br>
<small>下午陽光、小孩與溫暖</small><br>
<div id="1126a01" class="bigtitle011123">有溫暖的下午時光</div>
<div id="1126a02" class="col20191123"> <b>一種異想不到的溫暖<br>帶著我們走向想像的天南地北的大器<br>/文:作者</b> <br>
<br>
在七月的中旬,我來到了山上的某地。山上的風是涼的,但陽光是燙的。<br>
<br>
陽光是漸小了,人開始出來了,小朋友早就擋不住那想逛出去的心。手和腳,並不是可以被管得住的。<br>
<br>
下午的陽光,是具有威力的。一種小小的溫暖,早就吸引著各式各樣的存在物,包括小朋友最喜去旁著的小狗狗。<br>
<br>
陽光從左上方照了下來,一群小朋友就那麼的圍著。我可以斷定,那狗不知小朋友在言語著什麼。但它的認真,卻超乎我的想像之外。<br><br>
在七月的中旬,我來到了山上的某地。<br>
<br>
陽光是漸小了,人開始出來了,小朋友早就擋不住那想逛出去的心。<br>
<br>
下午的陽光,是具有威力的。一種小小的溫暖,早就吸引著各式各樣的存在物,包括小朋友最喜去旁著的小狗狗。<br>
<br>
陽光從左上方照了下來,一群小朋友就那麼的圍著。我可以斷定,那狗不知小朋友在言語著什麼。但它的認真,卻超乎我的想像之外。<br>
</div>
</div>
<div id="aaa011129">
<span style="line-height: 2; padding: 5px; border-right: 1px solid gray; border-bottom: 1px solid gray; font-size: 14px; cursor: pointer;" onclick="$('#1126a01').toggleClass('bigtitle011123modi'); $('#1126a02').toggleClass('col20191123modi');">一欄版型變化, click!!</span>
<span style="line-height: 2; padding: 5px; border-right: 1px solid gray; border-bottom: 1px solid gray; font-size: 14px; cursor: pointer;" onclick="$('#1126a01').toggleClass('bigtitle011123modicenter'); $('#1126a02').toggleClass('bigtitle011123modicenter');">居中版型變化, click!!</span>
<span style="line-height: 2; padding: 5px; border-right: 1px solid gray; border-bottom: 1px solid gray; font-size: 14px; cursor: pointer;" onclick=" $('#1126a02').toggleClass('bigtitle011123modibig');">字體大小變化, click!!</span>
<span style="line-height: 2; padding: 5px; border-right: 1px solid gray; border-bottom: 1px solid gray; font-size: 14px; cursor: pointer;" onclick=" $('#1126a02').toggleClass('bigtitle011123modiblack');">字型使用變化, click!!</span>
</div>
<br>
<br>
<br>
<br>
<a href="https://bornandbredbrand.com/" target="_blank">說明範例的網頁 click!!</a><br>
<big><u><b >圖文整合排版寫作重要觀念</b></u></big><br>
<br>
<ol style="padding-left:1em;">
<li>數位文本是螢幕閱讀,這不容易,所以文字應儘量少。<span style="color: #ff6666;">往往文字擔任「摘要」的說明</span>就
夠了,<span style="color: #ff6666;">具體的內容細節,應由圖像或影音來補 充</span>。這正是圖文整合文本寫
作的特色。【<a href="https://dintaifungusa.com/" target="_blank">範例, click!</a>】</li>
<li>因為文字量少,而且是擔任摘要型的功能,所以閱讀的速度就不用被強調。在排版上,往往可使用降低閱讀速度的排版方式。</li>
<li>在文字字型上可使用無襯線體(sans-serif),例如黑體。在排版對齊上,可以使用居中對齊。在字行的長度上,可以加大長度,沒關係。</li>
</ol>
<br>
<table style="width: 100%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 50%; background-color: white; "><img src="https://lh3.googleusercontent.com/RTPDO73ZcgY4PrWaS1IoFHQgoaXLsb6_3Pj3CoYGJ5PEpJsmyoGMIjKCUMSA0bHTZs2sHE8WXQEDICwUXcJNFpRWxqFR0myfOldP1WDNMO92p-z418neSYQ6aNxEJHlFI-YhVWS3IiH3ys-sm80NOaDhXQi6lNuVZTyo92q2Xd59MMULVp9rMbjw1ac2OmQtrpVw0pWjgomJNo2ZvdYhEAdpxcS7kBqN7o_z1vh5NXKpnRz0UVViGlMPTNGGRsIQiek1ra6DQuON7ue7bCgG8aR7LdxbTvAaFBRY3m9Q_SOPB7g9GP4sc5M3hDzM1trk5uB_rx1ON3R0UjaeKyCE2DNt8vYlGm8JHynpF-enLXZl5BV1ueXoHJC1TkZRvBNTepLJ4f0Zk5CipPZ4h1liEiI6Cbn_2zgTElkI9YSol9zMUSX2InwO_Q2gXVJROtmHJAJDPYFk6tMgqmMvX1JrS8Y0Yeu0lMp1zINMkOpcK_QjKM2IcQG-6Gbe--Wj5itTnGx7-XPPdMlOIONo9zcJ2JDKLsnZyiAn9VXCerw_ly9l905CiUkTSZu8Ine7bfdI7GWKibvHpx5cYxlmHc98K8KxZFkozG7p4qJWaWx9NT6hg0uybtoxPcSXl6BxVWgkLD2dIbECCOSFXw_e9nie551lSbgMq_IJkp0p05ZKtstVhHWJjWxdE4Qg9VLBBbov_65tcmd-pk8enneDJBjprzfnMilkMPfUhDWpseHmgGp56RkPrQ=w543-h159-no"
alt="" style="width: 310px; height: 91px;"><br>
</td>
<td style="padding-left: 15px;"><b><br>
襯線體</b><br>
<br>
字有凸出的三角形。例如細明體。<br>
在傳統印刷中,襯線字體用於正文印刷,因為它被認為比無襯線體更易於閱讀,是比較正統的。</td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/5gSL9xsXGzyngi6JRP6HI10Bwl5eH0Sa0-hmv0vYz3Ou5csaro7ZF385Jfyp6rrh6fcTdcmvotxFqp-Jo6sjassDZJzbRJz7BMKoVSpxXzMJvA7Mpstz6ByNf6n6axunaVV7gGCRxB5iJ-Zr2cXy2YwsR4jVkuZXODjtWueUHMWVGssKHpo6rZs_L606X4nHniNEjCXtVPlZ9rspB2Q7fmwAT36F3TgfcrmN7Flt6twj4a-97Fx6gAYg-yYgJ5FV1k9LyCIr-uesDWE02z4lmfFEcasJwAnj8SKuJtYDK9_YW9BUhFLIrClS9_sdWmq_KA1X29ef8_rCLa1Z3btHyoQkH_mFiI29rgE9tU_y-TorRwI5qOBOf6ggXmBdbjNZh9HMpLvoHW85yQWUFLFg8bnReigQJ6D_qgXFGay0Dok1TnaWPKi-SYCRlpXZG2YFrK6u72UAIT3-2_PFLvY3HBJV8z84IVJZpvpkniPiHLl9TpRoW_ejR7C7d6oHZdq2cYbZ2-38j9EA-AXVjTYAOod2urEx2wkpjhvC8UwaVKNhCEDNKIPsNNy9C3o0ms4Nrn79lmj2WBEO36tO499ne0oDV2fWb85T-_qlHdbVhrjHyoIeVrY2lv52vOHv5wB1OX8-9vq1_ZHl6kPfquFlR6csFLDQ425PoXoqvGCBIJr1Wgyxq-FCBaIw1vVKB8IuaR7vsne66rK1Xab9rqIWaF7gindFSUfA3ZiRYST0SnnCfAnmGg=w316-h138-no"
alt="" style="width: 225px; height: 97px;"><br>
</td>
<td style="padding-left: 15px;"><b><br>
無襯線體</b><br>
<br>
字沒有凸出的三角形。例如黑體。<br>
無襯線體用於短篇和標題等,能夠引起讀者注意,或者提供一種緩慢的閱讀氣氛。</td>
</tr>
</tbody>
</table>
<br>
<br>
參考資料:<br>
Golombisky, K. & Hagen, R.著/林安琪、于冠雲譯。(2012)。《設計之鑰》。台北市:碁峰。<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-48882835604963230412019-02-17T11:45:00.002+08:002019-02-17T11:47:29.272+08:00超快的添增圖表(with infogram)<style>
.wordchange0120190217 {
font-family: Verdana, '微軟正黑體';
font-size: 3em;
font-weight: 900;
line-height: 2;
letter-spacing: 0.1em;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.cha2019021701 {
font-size: 1.7em;
display: inline-block;
transform: skewX(-10deg);
}
</style>
<br>
<br>
<br>
<div class="wordchange0120190217">快速在網頁上添增<span class="cha2019021701">圖表</span></div>
<br>
視覺化閱讀,是網路文本呈現去「表現意義的」重要技巧之一。可以說,可能是「很重要」的意義表達方法。<br>
<br>
但,你會弄出一個漂亮的圖表嗎?不會。<br>
<br>
對,所以,有沒有一種方法,它可以比較快而方便,同時是較為「user-friendly」的可以操作出來圖表來?<br>
<br>
有的。這裡介紹使用 infogram 這個網站。使用它快速地建構出圖表來。<br>
然後,我們再教你,如何把在 infogram 網站裡所做出來的圖表,嵌到你的網頁裡。<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">範例:</span><br>
<br>
<script id="infogram_0_7e7003a3-a3ac-4ff1-90a5-2d37adbf68b8"
title="test for wix" src="https://e.infogram.com/js/dist/embed.js?twQ"
type="text/javascript"></script>
<div
style="border-top: 1px solid rgb(218, 218, 218); margin: 0pt 30px; padding: 8px 0pt; font-family: Arial ! important; font-size: 13px ! important; line-height: 15px ! important; text-align: center;"><a
href="https://infogram.com/7e7003a3-a3ac-4ff1-90a5-2d37adbf68b8"
style="color: rgb(152, 152, 152) ! important; text-decoration: none ! important;"
target="_blank">test for wix</a><br>
<a href="https://infogram.com"
style="color: rgb(152, 152, 152) ! important; text-decoration: none ! important;"
target="_blank" rel="nofollow">Infogram</a></div>
<br>
<br>
<br>
<br>
<big style="background-color: rgb(204, 204, 204);">使用 infogram 建構圖表:</big><br>
<br>
<br>
<span style="font-weight: bold; text-decoration: underline;">在 infogram
中建置圖表</span><br>
<br>
<iframe src="https://www.youtube.com/embed/BfuEDhaDiW0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">將圖表的語法,嵌入到你
的網頁</span><br>
<br>
操作過程方法如下:<br>
<br>
一、找到分享按鈕<br>
<br>
<img style="width: 560px; height: 398px;" alt=""
src="https://lh3.googleusercontent.com/Hno4ZYiMPUFEHp0p3Y3snTbGMOPvBpxg0zWbHMYj1jbLJFcdkqtMgef-egzCDTWIU3zSUBCXRDeF6T7uQJGmiaeN8orcJmDaisRLwyqmCElRhfq1MpF6Ez7FtK-gTvYD1aXg9CJgFDCgmvbJjlhbcD7vw7GlwIoVBav3b3DPYRxA9rUD-5VDFV5rJTnTK4YUJ_1XdOHr2gIaoxBKRKh08fJf6H_PCf2X4sMYYOX6n5Sl0q8U553TZGzZIRQP7r-cvBBfzuODY3F0QALBmsJzbr9_T-2rDruOt0gjcRNTKt8cmhMk7z-WvMP6jFRBcGcmTCbZ_2dWBmDN60_Xme-xpQmSyew8CISFDlBKBmXHjGW9fB0wa5pfQGjNWsg2-eLdXVcQ8FtV8o_SEMBp_FGPBnXmvt523dy63m-jmhjyckvxvxr8oLF2vqb-Puy_YI2Ymp0V0ZRNakmt7JJpRFszx4Qb4434qrdj3VC06lBA8dkHKi5DK4tq2_OitzZ-Z1lMQN0-QHfF2Tva1wQh2pqliGdJQfBEg935YAdIglB_wzWxWlRz4bwkdrecRNX9Kg54Lad5VWyR5GKwyJP0Quley5Xta32Ph0Dh6cCC9fI4hbTIENBVRQPdlLBXPsiiY_kj2sqxJqqx2zgy1O2VgmDVsLFVMcD3_J1u_-GViXjqB96oYrKgOnz8ioh51HfKwbY-h5Y6_19NUmc7tsHlLH_03mZh8Q=w748-h531-no"><br>
<br>
<br>
二、填入圖表標題、按下「Embed」(嵌入)鍵<br>
<br>
<img style="width: 560px; height: 449px;" alt=""
src="https://lh3.googleusercontent.com/IWwAaMfZoNVD4l1hD6xMQ3x3m_2cC65lVc3yNImf1pcOCzfb2eMwytEvbbAbLwti4qzIBNXkjdxy6yb5QnwcmnRXaJ_WH51ddgUU2NXbBt4DSO4-4_clYXCeqjaEy7WQCzERo8Y8u4t5mISHuIAtoKytm5MNX2R49Xha04SJM2yBrhNa5v0EsyWVuKcpauGMSzDwV5Gp2UhSPNpPssvYvg9eSB_qeTDvbHiV1SmRRtgKcGBbaZlSPGQn2uLK1fPpainHDa7-LLtM3UlZY7qY4x2psfbx9kFsh8SGsVBaduGnyIuLqbKhSQtBvo0uZhDls0W5O3Mr8X8mog70thewcHb0QLw2U3NUnT7OQRIkbyRA0psdWljWUdFNgdgvAH7eHlEnaDUyWwtI1m0Lsu9jOVLlTRp4wuQp6xbBUf8neEqlMJ_hNJy-43PwvQCjNvAItgyyRc6qgPvltISLGSEZUFW1eeHRuxAS7JZOkzOIq57bfteRSscf6kmRum-sAyeI6o6APCzDQXcu5G1p4TYDrMHxDwD2eAmO0YN6jK7pAiFzDY71u-NuN8NB2ZGTtVQbL6n-pBhSpKRLYqzrTemd2jD49wIHUg1OTTiU2IyzSuE7qjqPXBWcyCqC2SeMOc3W4l_gZQTvCvE_A2lLGSsTqRUcyZcvXErPp3joULKpZqehAJGOnNewSQL7CTYiNENhJQwnEh939sjbmYzD_dwPLfsV4Q=w1003-h804-no"><br>
<br>
三、找到嵌入碼(注意是第2個選項),copy<br>
<br>
<img style="width: 560px; height: 371px;" alt=""
src="https://lh3.googleusercontent.com/zDGNoGODrxBUm9jPVkVjrqo5ryggz9o2ZdhJoTAlKUUrl87pDa-7AhTT2ZaZTze2Fa4bmO4uKPQu12k847Pwj73Z4npXw5gnxdZiamvhRNjxZ2DMgqpUo386MA_Aa0PkCMOociZ_qwQRPBD4pzULRMhVXSA4W_4_mVMzmSJnmNQPz7XYoV2YF41qHdhpSZtMA5xPmAQGJUceOHEPTTgqBebYwp-TMGIx3dfSv5lrWwof_QDqfXUQr6E6NlAWD7Pk1wir6A421Bb_ZE98vB-5UUWK008mwB8s0PHbcuzccL2NopVJ0YuWyzxHNE7hsJChKiMoOza6Q_gxkszL6EjPfqXaxJa1TzltioENQJDroJrR_43JV8_T0O62Wx11U3q85o7iCBF1Rs7grTYc-JbyAE-GHOeJmjFdNZElsCb5ds7oZNTC_hWFBjA4YUPcDpNN8A5SMD0sn9ulAiZ6VF3pvTDPBr4MqkKs2uMvEaGdhtHbPHujcCCRYwa2bCriCQEFEKILaVWmg59rVxaT_OimCIpMm1dvukR0CzpCMWLgrIdwHJaIQTn-lbPV2jI3W577-LGamZ6gVJrou9cwPUD81Zo5cotmmYyJEUlgor0BdkYcQWwu1CB5P7Rxal-4le8w1s3f3V-fuzPKhsFZ9UXPKZtTXShDW1UxBE5YSqsPYDFKb67NtfmP5CIwFQvRn5ZAxfKpeHxzRG5rPwG_pz0uFUJdtQ=w1011-h670-no"><br>
<br>
四、貼入到你的網頁原始碼中(Kompozer為例,【插入】─【HTML】)<br>
<br>
<img style="width: 560px; height: 427px;" alt=""
src="https://lh3.googleusercontent.com/bsd5ylGmtvX_9a46Ut2FB02aWw1C4pWL7_V5s_Q8uUCubIf0aQL0lshNoSIGcMmHcI0GUYtXm-rb7-L-7krF6aFvPzJvd-GWnD3FWDEg0mp0qNWDCN8sHr7THkCo29Nl4zMg2bRX-vBSZ3mwzDV0leN1c1fjvH9yLg_uTPDY0u_wILvb5CyqA2YkLQb0QGidnRonLJE5n6U7oBPZHc49mC9VhBLbYx-PjovWB7oCSzAuf2VWk-Xw-J5hSyxdXUOOyrnXcvZF69u6jxGy43weR9NQUqFstEPmHEWzFgsJgTGkebu__OOwomrvN7-1UNih7wzIfx1NIKNQcITXVLe0posFLELEVYp0TAn2mr5CUhE5CuKD1ZRBbOFkH_da8FR4f7ZljbRpUpR9oEetiweRhwJha370ix0eH8wH4n0EOhi-yTlHH-JmUrLVy7ZvFpwX0h3ePukppyux64Tj32kXDTfn_-55yedt6x6VXUAdjg7uMPA_xakJhSupeiEbVUx0KeSiZVufQXLUkTAjUcgeywglh4CjrqfOVbu7Nfl5eUKYv9YiGXE4RLOUlxk-74JO7wldbfsC4OO5_wbknJQyWlx4NT_FPOXE87B5W-Ac9bG_QiMc5UdEg4kGdjnFe92UBdyaIpdJq3QvXp1efjZj4M8wrvauac0kJfxMAnT3Toyux7Zrqeshb8JI0gK-YhC4fRf1y-CkZFlrkc9q8YGlzC11Rw=w827-h631-no"><br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-52820010930302994642018-10-20T15:32:00.000+08:002018-10-20T19:36:30.934+08:00「第一次」搞定圖表視覺化的呈現:flot<style type="text/css">
.bigtitle010708 {
font-family: Verdana, '微軟正黑體';
font-size: 2.45em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
text-decoration: underline;
text-decoration-color: red;
}
.middtex {
font-size: 120%;
font-weight: 700;
background-color: lightgray;
padding: 2px 0px 2px 0px;
border-left: 5px solid darkred;
border-right: 5px solid darkred;
line-height: 1.3;
}
.mword {
font-size: 110%;
ling-height: 1.8;
}
.midtitlesto1020 {
font-family: Verdana, '微軟正黑體';
font-size: 2em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.05em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: darkred;
-webkit-text-fill-color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#flot-placeholder{width:565px;height:400px; margin: auto;} /*<<放圖表的DIV設定*/
</style>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.min.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.time.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/flot-axislabels-master/jquery.flot.axislabels.js"></script>
<script type="text/javascript">
var data1 = [[3, 130], [4, 40], [5, 80], [6, 160], [7, 159], [8, 200]]; /*<<黃色折線的數據結構*/
var data2 = [[3, 170], [4, 30], [5, 120], [6, 100], [7, 119], [8, 210]]; /*<<黃色折線的數據結構*/
var dataset = [{label: "李某人",data: data1}, /*<<黃色折線的說明文字*/
{label: "陳某人", data: data2} /*<<藍色折線的說明文字*/
];
var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
},
xaxis: {
axisLabel: "月分", /*<< X軸的說明文字*/
tickSize: 1
},
yaxis: {
axisLabel: "按讚數" /*<< Y軸的說明文字*/
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
</script>
<br>
<br>
<br>
<div class="bigtitle010708">搞定圖表視覺化的呈現:flot</div>
<span class="middtex">
►視覺化,或圖表資料學,正紅。◄</span><br>
<br>
<div class="mword">
一位申請到英國碩士的學生來說,那學校要求要有資料圖表數據的能力。那麼,我們就來學 flot 這個簡單的圖像化程式。<br>
<br>
選用這個模型,是因為這是最常用的。<br>
二組數據線條,可以呈現出比較以及時間的變化。<br></div>
<br>
<br>
<span style="font-weight: bold; text-decoration: underline;">下列資料請放到<
head>xxx</head>之間:</span><br>
<br>
<style type="text/css"><br>
#flot-placeholder{width:570px;height:400px; margin:
auto;} <br>
/*<<放圖表的DIV設定*/<br>
</style><br>
<br>
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script><br>
<script type="text/javascript"<br>
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.min.js"></script><br>
<script type="text/javascript"<br>
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.time.js"></script><br>
<script type="text/javascript"<br>
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/flot-axislabels-master/jquery.flot.axislabels.js"></script><br>
<br>
<br>
<script type="text/javascript"><br>
var data1 = [[<span style="color: red;">3, 130</span>], [4, 40], [5,
80], [6, 160], [7, 159], [8, 200]]; <br>
/*<<黃色折線的數據結構。 [3, 130]是指x軸 3月,y軸按讚數130。 數字請使用半型數字。*/<br>
var data2 = [[3, 170], [4, 30], [5, 120], [6, 100], [7, 119], [8,
210]]; <br>
/*<<藍色折線的數據結構。<span style="text-decoration: underline;">如果只要
一條線,這組不要有就成了</span>。*/<br>
<br>
var dataset = [{label: "<span style="color: red;">李某人</span>",data:
data1}<span style="color: red;">,</span> <br>
/*<<黃色折線的說明文字*/<br>
{label: "<span style="color: red;">陳某人</span>", data: data2}
<br>
/*<<藍色折線的說明文字。<span style="text-decoration: underline;">如果只
要一條線,這組不要有就成了。同時上面那組最後的「</span><span
style="color: red; text-decoration: underline;">,</span><span
style="text-decoration: underline;">」要拿掉</span>。*/<br>
<br>
];<br>
<br>
var options = {<br>
series: {<br>
lines: { show: true },<br>
<br>
points: {<br>
radius: 3,<br>
show: true<br>
}<br>
},<br>
<br>
xaxis: {<br>
<br>
axisLabel: "<span style="color: red;">月分</span>",
/*<< X軸的說明文字*/<br>
tickSize: 1<br>
},<br>
<br>
yaxis: {<br>
<br>
axisLabel: "<span style="color: red;">按讚數</span>"
/*<< Y軸的說明文字*/<br>
}<br>
<br>
};<br>
<br>
$(document).ready(function () {<br>
$.plot($("#flot-placeholder"), dataset, options);<br>
});<br>
</script><br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">這是要呈現圖表的
HTML設置,放於<body>xxx</body>之間:</span><br>
<br>
<div id="flot-placeholder"><br><br>
</div><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">圖表的呈現:</span><br>
<br>
<div id="flot-placeholder"><br>
</div>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-56601381143113546742018-01-03T18:23:00.001+08:002018-01-11T13:36:33.916+08:00滑鼠移入,就產生引起注意的動態效果<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function dobounce() {
$('.imgab20171225').effect('bounce', { times: 5, distance: 15 }, 400);
};
function doshake() {
$('.imgab20171225').effect('shake', { times: 3, distance: 12 }, 500);
};
function dohightlight() {
$('.imgab20171225').effect('highlight', 800);
};
</script>
<script>
(function( $ ){
$.fn.myborder20180103 = function() {
// 你的Plugin內容寫在這裡面。
$(this).siblings().removeClass('borsha20180103');
$(this).addClass('borsha20180103');
}
})(jQuery);
</script>
<style>
.divword20181006 {
font-family: Verdana, '微軟正黑體';
font-size: 2.07em;
font-weight: 900;
line-height: 2.4;
letter-spacing: 0.15em;
background-color: #7B7B7B;
text-shadow: -1px -1px 0 white, 1px 1px 0 #333,1px 1px 0 #444;
}
.divword20181006 span {
display: inline-block;
width: 125px;
line-height: 1;
position: relative;
top: 0px; left: 0px;
z-index: 2;
}
.divimgab20171225 {
position: relative;
}
.imgab20171225 {
position: absolute;
top: 25px;
right: 150px;
}
.boxsho20171227 {
box-shadow:1px 1px black inset, 1px 1px lightgray;
}
#divwordspan20181003 >span {
display: inline-block;
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: 800;
line-height: 2;
letter-spacing: 0.1em;
padding: 0px 6px;
background-color: rgba(255, 199, 143, 0.8);
margin-bottom: 5px;
cursor: pointer;
border: 1px solid transparent;
}
.borsha20180103 {
border-top: 1px solid black !important;
border-left: 1px solid black !important;
border-right: 1px solid lightyellow !important;
border-bottom: 1px solid lightyellow !important;
background-color: rgba(255, 199, 143, 0.6) !important;
color: gray ;
box-shadow: 1px 1px gray inset, 1px 1px gray;
}
</style>
</head>
<body
style="margin: auto; width: 578px; font-size: 13px; line-height: 1.4;">
<br>
<br>
<div class="divword20181006" onmouseenter=" $('.a20180107').effect('bounce', { times: 5, distance: 8 }, 500); ">
<span class="a20180107">滑鼠移入</span>,就產生引起注意的<span class="a20180107">動態效果</span></div>
<br>
透過這樣的動態互動表現文本,可以使得圖像的意義呈現獲得了「更豐富」的緃深。「身體」的動作而來的互動意向性,使得圖像產生了以往的媒材所沒有的一種意義展現能力。
圖像,在其靜態的「視覺意義給出」之外,現在也可以「再更多」為讀者給出了其他的意義。<br><br>
例如,下圖的互動,你不會只是看到「貓」這樣的文本意義,同時你也感受到了「貓在想著什麼」這樣的互動文本意含之呈現。<br><br>
這是互動文本帶來的新的意義呈現方式。<br>
<br>
<br>
〔請按下列的效果模式 ↓ 〕<br>
<div id="divwordspan20181003"><span style="text-decoration: underline;"
class="borsha20180103"
onclick="$('#ui20171226').attr('onmouseenter', 'doshake()'); $(this).myborder20180103(); ">
搖動的效果</span>;<br>
<span style="text-decoration: underline;"
onclick="$('#ui20171226').attr('onmouseenter', 'dobounce()'); $(this).myborder20180103(); ">
跳躍的效果</span>;<br>
<span style="text-decoration: underline;"
onclick="$('#ui20171226').attr('onmouseenter', 'dohightlight()'); $(this).myborder20180103();">
高亮的效果</span>;。<br>
</div>
<br>
<div id="ui20171226"
onmouseenter="$('.imgab20171225').effect('shake', { times: 3, distance: 12 }, 500);"
style="width: 560px; height: 420px;" class="divimgab20171225"><img
style="width: 560px; height: 420px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGiuAa1nNwXuSUi9ZoXy4wsxUmXyXCfAKefhKqfLOUIiJ82UrsUKkyy4BOwbtBorb1NflPccA9Cb4Dte08Z1m8kPJYpFJdoPN5yN_KA9FbLi26TvT0Ya4Wvn4djmDneXJptuMTPTHv9Cw/w640-h480-no/"><br>
<img style="width: 120px; height: 120px;" class="imgab20171225" alt=""
src="https://lh3.googleusercontent.com/24IA8t7TxIyCCzcbOIaPS3tZRmviVUMU5Qe5IJ4biIjQgNQxSuEFdgilAkAtiMQdfMN-32H3xGT8MY4xGrRmk6kuqkq0f67iALwXfiLlT9qPgLnLmXLjtFV79aTGYDh4oVsjr_NI6Z_tHy13Y-RVT2BOZuXc_1IFHujMNyY1b0MpDUVh1CXxT-vFFvtbLe6T0MmVTmGth35izvIl3zfBJX0WV8qUHRNbc-Xn6FMyud4NS53QPaH7w4NyQHFuvn8-d0e00KcGxEwCjTpgdqsPK5J98pXZ8Sr7WA-Kuf6IRN8jwabOf6KNNRraK46VGugay4t6MFMLi-73SCxQIHaBLDOHiTZYhYSnWaapsJZ5QbaN4N1-fIHEF5lcRb10uBNTK-owgiNdDb09aoK546tY2WuSowV7hvf0PKCUojODEn9M-2mLvfLlabOAH95XePGeWUugwm-S4O0u3H3FH2G92MdcWfMwZh6g7d6cgma2C2QAM5fn1NpEZWbE_B9o0F4qf6-5C-bVajF0cbMSRamUpLplPwI5KoWkv0HebeeBRGK-75EoTl8BZc16mJdaoVbJlQcehc-4x96Ef_uuzCF7-IMAZcG8zFVZiA3_jSObGSnF2uOZ_8W9MSi4LDI3KKKaqowcm2Sa-65Xm-alIHhjq9e_9YHQ4ZJ-Jg=s360-no"><br>
</div>
<br>
教學影音:<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JJrWuVb18VQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>
<br>
<br>
<br>
<big style="text-shadow: 1px 1px black; padding: 4px; box-shadow: 2px 2px 1px silver;">
構思:</big><br>
<br>
先寫一個DIV,依續置入二張圖。<br>
第二張圖使用position: absolute語法,移動下圖往上。<br>
在DIV寫入「滑鼠移入後第二圖動作」的語法。<br>
<br>
<br>
<br>
<big style="text-shadow: 1px 1px black; padding: 4px; box-shadow: 2px 2px 1px silver;">寫作程續</big><br>
<br><br>
<span style="text-decoration: underline; font-weight: bold;">
請先寫<head>xxx</head>中寫入外掛程式:</span><br>
<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script><br>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br>
<br><br>
<span style="text-decoration: underline; font-weight: bold;">
編輯內容的HTML語法:</span><br>
<br>
<div id="ui20171226"<br>
onmouseenter="$('.imgab20171225').effect('shake', { times: 3, distance:
12 }, 500);"<br>
style="width: 560px; height: 420px;" class="divimgab20171225"><br>
<img style="width: 560px; height: 420px;" alt=""<br>
src="第一張圖網址"><br><br>
<img style="width: 120px; height: 120px;" class="imgab20171225"
alt=""<br>
src="第二張圖網址(在上面跳的)"><br><br>
</div><br>
<br><br>
<span style="text-decoration: underline; font-weight: bold;">
編輯內容CSS 語法:</span><br>
<br>
<style><br>
<br>
/*設定當定位點的DIV文字框之屬性,以四角可為原點*/<br>
.divimgab20171225 {<br>
position: relative; <br>
}<br>
<br>
/*第二張圖的absolute之位置,使用top, left, bottom, right*/<br>
.imgab20171225 {<br>
position: absolute;<br>
top: 25px;<br>
right: 150px;<br>
<br>
}<br>
<br>
</style><br>
<br>
<br>
<br>
<big style="text-shadow: 1px 1px black; padding: 4px; box-shadow: 2px 2px 1px silver;" >滑鼠移入後的jQuery UI 語法</big><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">搖動效果:</span><br>
<br>
onmouseenter=" $('.imgab20171225').effect('shake', { times: 3, distance:
12 }, 500); "<br>
<br>
【說明】<br>
<ol style="padding-left: 23px;">
<li>times: <span style="color: red;">3</span> 這是指搖動次數,可以自行增減數字。</li>
<li>distance: <span style="color: red;">12</span>
這是搖動的距離,可以自行增減數字。</li>
<li><span style="color: red;">500</span> 是指動作效果的時間,1000是1秒。</li>
</ol>
<br><br>
<span style="text-decoration: underline; font-weight: bold;">跳躍效果:</span><br>
<br>
onmouseenter=" $('.imgab20171225').effect('bounce', { times: 5,
distance: 15 }, 400); "<br>
<br><br>
<span style="text-decoration: underline; font-weight: bold;">高亮效果:</span><br>
<br>
onmouseenter=" $('.imgab20171225').effect('highlight', 800); "<br>
<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">補充:效果出現後再換圖</span><br>
<br>
<br>
<br>
<span
style="padding: 15px; text-decoration: underline; background-color: rgb(255, 209, 164);"
onmouseenter=" $('.imgab20180105').effect('shake', { times: 3, distance: 12 }, 500).queue(function() {
$('.imgab20180105' ).attr('src', 'https://lh3.googleusercontent.com/WUND7F_1GIv-YaxJmwHR07RNBkiDglD-GS-UMvHVvzV3Cm0HBgssfPjCmL2m1KvX6y8nnRkNZuSmKn-9nCJIudaCqG5C0BwPwcOgIktEUmgFJSqiEerB7ngr8tItWEZ4MKSOoDuYNvwL3I-g4m80pi7slNvooXLQgxbf4yWyjIQ0fkJiGZcWAh7EtBZajhJFc9ns1k_Hce1lCWBrUQ2wcy9o-Xvfn_EVw1Q5CMkw05VDWd-UCfpZ6qw1tdI9FkM8VxOL-icvOdOL-si9oNnZm_pdnFwldeSGkxgjqhO3TTVjaDTEzq1AoFtOAn9jOGWb_pmsuxDYYNLPwirOOrg5if_poFl7k7oY-jaix4ypYV4GOGzv414R6Rgl_EhzPkgrDgJxBl1SdcswUHCNpo1Jm2dJUMNpb3tPF-I6UIUUAthfHz-AO7_cxlwwG-bTAc1JtTF_PBQVJhM9C7AafTt60oxmNigXAwtzN-zyajyL1m1bMmiQik4gSWTqyeLLQhc0WKtr-tTywVflFcrLcw_4ab3AkxdyBnZyinOIKdfftMvvrldBGhHVy17WIXIlRK51kud2LVlFH_7MWE5PjLOcf_VapmWx6G5XnHRTgGme6IuchV0hVNRRkI5uhj-fSvXgv7knvtSxjQkrB5buK6ZNxlxcIM7MpizzJg=s128-no').dequeue();}); "
onmouseleave=" $('.imgab20180105').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5EC88O18v9_n0oLgQuEA8bsD7BiCcNruTl4USaC-iqnp429iQk87jQ4XEtUwCZhfQdR5kAQ_E_b93YHEY7fLZthSWj2kZ-LETuahgTx0kTvQY5HJ89sOhiZ5PS0X-qLqBG85oGyrgHkU/s360-no/'); " >請
將滑鼠移入此處。</span><br>
<br>
<br>
<br>
<img
style="width: 103px; height: 103px;" class="imgab20180105" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5EC88O18v9_n0oLgQuEA8bsD7BiCcNruTl4USaC-iqnp429iQk87jQ4XEtUwCZhfQdR5kAQ_E_b93YHEY7fLZthSWj2kZ-LETuahgTx0kTvQY5HJ89sOhiZ5PS0X-qLqBG85oGyrgHkU/s360-no/"><br>
<br>
<br>
以搖動效果為例,語法:<br>
<br>
滑鼠移入後,<br><br>
onmouseenter=" $('.imgab20180105').effect('shake', { times: 3,
distance: 12 }, 500).<span style="color: red;">queue(function() {$('.imgab20180105' ).attr('src',
'要換照片網址').dequeue();})</span>; "<br>
<br>
滑鼠移出後,<br><br>
onmouseleave=" $('.imgab20180105').attr('src', '要換回原照片的網址'); "<br>
<br>
<span style="text-decoration: underline;">說明:</span><br>
<br>
滑鼠移入後搖動,最後再加上「換新圖」的語法(紅色字體)。<br>
滑鼠移出後,又換回到原來的圖。<br>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-62538289486991972052017-10-28T18:42:00.000+08:002017-11-20T16:19:05.336+08:00CSS 選擇器的使用:父子關係/ 子孫關係/ 兄弟關係<script>
(function( $ ){
$.fn.myPlugin171028 = function() {
// 你的Plugin內容寫在這裡面。
$('#divle2017102801b *[class*="02"]').toggleClass('addmargin');
$('#divle2017102801b *[class*="03"]').toggleClass('addmargin');
$('#divle2017102801b *[class*="04"]').toggleClass('addspansp');
$('#divle2017102801b span[class*="03"]').toggleClass('addspansptr');
$('#divle2017102801b +div').toggleClass('bacl20171028add');
}
})(jQuery);
</script>
<style>
.divwordbig20171028 {
font-family: Verdana, '微軟正黑體';
font-size: 2.21em;
font-weight: 900;
line-height: 1.05;
border: 1px solid darkorange;
letter-spacing: 0.03em;
}
.divwordbig2017102802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.67em;
font-weight: 900;
line-height: 2;
letter-spacing: 0.05em;
}
.divwordmid2017102801 {
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: 900;
line-height: 1.5;
background: rgba(152, 152, 152, 0.3) url(https://lh3.googleusercontent.com/pXI8D-soKbr5P9EITGkGruiXNLGgEK_IXFc6ANNjLih3TVkutq9JMSXKxbQnTHGoUx81iWe2A1N3DpUBDV2eCI0XVQFe537L92OA2EsGcJuNjjiiLU3cIDy2o3Lbk_di4Lctfnk-KPGK08b0yZ5q2K8qUgZf6O8K2pwr0J3Pg7IL1dKDwDsLZ10kBC-INV43e63RwggjGRIKe6FHYF0bHxt8OsKQ4honwv4jUUyX_uu1pM39qrj31nlCj2TfGDtXomaK2tvn4gCzdwE8qpC2d3HrHfh3-9dW4niwo3J0HMWCD7lEMYrgtYZ7AFyxF0y6KtWSRJC6ghTCskHJ2iHpzzCGf_rxYkXDHBnWFSjVZTfaTgPtdMP9vhfm-3nJB9_A4NDP_dCzncS7I6X7EXc8xK56PedAp2Gi6cwpodJJpI2LV38bF1sBybiJR125Z5HPhfn9SJDgM9kB8SCaeS6eEtS08K4FIqooEXwv99RzjfSwR8NVW7BXNPjV__mhQ4RFE8n4XlN_TSEGWNFuISnWxd9kfI_SltNkLwzjryMDOwAY9JByu2C1aCk2E8Uiar3EMptX71KUvw8TLez4TX43xF3H-PbTl957RyYoyCfeFjAOkrnuqNwWcn5zA4M0XgZzKToGMu2y_C95bGHfG8BE4ckQqhJVE08GMgFT=w257-h211-no) no-repeat left 5px center/ contain;
letter-spacing: 0.03em;
padding-left: 3em;
}
#divle2017102801a {
border: 1px solid red;
}
#divle2017102801a > * {
margin-left: 15px;
}
#divle2017102801a > div {
border: 1px solid blue;
}
#divle2017102801a > div >div {
border: 1px solid blue;
margin-left: 15px;
}
#divle2017102801a > * span {
display: inline-block;
vertical-align: -7px;
margin-left: 15px;
}
#divle2017102801b {
border: 1px solid red;
}
#divle2017102801b >div{
border: 1px solid black;
}
#divle2017102801b >div >div{
border: 1px solid #0072E3;
}
#divle2017102801b span{
display: inline-block;
}
.addmargin {
margin-left: 15px;
transition: 0.6s linear;
}
.addspansp {
margin-left: 15px;
vertical-align: -7px;
transition: 0.6s linear;
}
.addspansptr {
vertical-align: -7px;
}
#lemouex20171028 >div >span {
display: inline-block;
transition: 0.5s linear;
}
#lemouex20171028 >div:hover >span {
color: red;
text-decoration: underline; font-style: italic;
transform: translate(7px, 12px);
}
.bacl20171028 {
border: 1px solid gray;
margin-top: 5px;
transition: 1s linear;
}
.bacl20171028add {
margin-top: 20px;
}
div.t002bx >span {
color: black;
}
.class003abc {
color: blue;
}
#teid005 {
color: green;
}
#exdiv20171028 {
border: 1px solid transparent;
}
#exdiv20171028 >div{
border: 1px solid transparent;
}
#exdiv20171028:hover {
border: 1px solid black;
}
#exdiv20171028:hover >div{
border: 1px solid gray;
}
div.test001a {
border: 1px solid black;
}
div.test001a > span {
text-decoration: underline;
color: red;
}
div.test002b {
border: 1px solid black;
}
div.test002b >div {
border: 1px solid blue;
}
div.test002b span {
text-decoration: underline;
color: red;
}
div.test003c {
border: 1px solid black;
}
div.test003c +div {
background-color: lightgray;
}
span.wocha20171028 {
text-decoration: underline;
text-decoration-color: blue;
}
.divtest20171104 {
border: 1px solid black;
}
.divtest20171104 >div {
border: 1px solid red;
margin-left: 15px;
}
.divmid20171104 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: 900;
line-height: 1.8;
letter-spacing: 0.1em;
padding-left: 3em;
background: rgba(152, 152, 152, 0.3) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDYjuNP6PbogWDBQEE-r0fwr3QIffgtuF1r7WK41AQZjrNaZEP4aLZmLzadm6mrIicvddcJu-Y3AoRa2SL_y2vNuzxi70XjrsQGBcbZB3wtujDrpXz1e7SERugNWSGazS5c8Wh2dNMHc/s200-no/) no-repeat left 5px center/ contain;
}
.divse1104a {
border: 1px solid lightgray;
}
.divse1104a >div {
border: 1px solid red;
}
.divse1104a div:nth-of-type(odd):hover {
background-color: #BDB76B;
}
.divse1104a div:nth-of-type(even):hover {
background-color: #40E0D0;
}
</style>
</head>
<br>
<br>
<br>
<div class="divwordbig20171028">精準控制媒材物件:<span
style="font-size: 1.2em; color: darkorange; background-color: lightgray;">CSS
選擇器</span>的使用</div>
<div class="divwordbig2017102802"><span style="background-color: rgba(0, 115, 230, 0.3);">父子關係/ 子孫關係/ 兄弟關係</span>三種關係模式的操作</div>
<br>
<br>
這是很重要的數位文本寫作技法。CSS選擇器的使用,是數位文本寫作過程中,「媒材物件」這一寫作觀念逐步產生寫作構思影響力之後,必要被重視的一種寫
作技法。對「媒材物件」掌握的精準性要求,標誌出數位寫作完全不同於傳統文本寫件的「寫作思維」。<br>
<br>
這一種文本寫作觀念和技法,是傳統文本寫作時所沒有的。換言之,一般寫作者對這種觀念是完全陌生的。事實上,讀者必須是有著一些基礎的數位文本寫作經驗
值,才能理解它、使用它;而且都需要花一點時間,才能被充分掌握。<br>
<br>
建議先「玩一玩」下方的互動示意圖,讓自己對媒材的「層級關係」有些大致性的模糊理解;再看一下影音教學。這樣,往下所寫的解釋性文字,才有被理解的可能性。<br>
<br>
<br>
<br>
<img style="width: 420px; height: 256px;" alt=""
src="https://lh3.googleusercontent.com/zAu8VuE2umxEiejrcqPvTEICT0WlURXl3u_9mAQgHzkoIOUuABuYkGxoJ0a5jlz4nTA3sk8P1FkMZRtqrcDD2DjPoewlkMtx7-XeS-0C8mj6aQmTEZOz2QwuFiIv5d2_dayilA4IXfmovg7ZHbhYPL32aFLEAMQEbekrIZMFlPCDaqg9A_3r-HSXHZjIbVObrrJKXXBmhJ_8kTAP8kKw3NgcDYGVyTddXafhmM0gfIoHWZI6SBTc9QpVSiNzzCAtz9zHPNoApAS1YkQ-feJdJsGvIZA79CvEqqPKCWdRAtOr9hAL5kDKPj5q62GXLDqT_8T8DNPDzCGS6mIKdWWkqrEQ01roRLBT6YJgx0gq4Vvp9_X8B4pt_vw1PoU4kmU2r9WRDOHej9YWQMZK5ro4qc_8ViovXjRFeWBM7oDwgJKT3y04pkpbNT6ZyRJ9Imq92vWrNgzChRG79dIUs2p645mmfJt-v5BQ36I1er4l8NuB8M7DUEjBQlS5o2dO02FORIaIEnbXHGeblWSDk5vqCDk7UGBOC6zEF7QkJpSMHmyIuwriHcliv6aOCe1wdv_7f0hQZcRCVlZLZLfqDi3WQPcl1cbUZXddTUgshysR-atyYrQrvPxXD_beDnaR5lX5Vs2RpHhr24A8Wd5lZS7_szVq2wUo_KNoaPIR=w295-h180-no"><br>
<div id="divle2017102801b">前一個個DIV(id ="divle2017102801a")。<br>
這也是第一層的DIV,001。<br>
<br>
<span style="text-decoration: underline; font-style: italic;"
class="lecla02">002第一層內的
span文字</span>。<br>
<br>
<div class="lecla02">第二層級屬性的DIV,002。這一DIV的內部<span
style="text-decoration: underline; font-style: italic;" class="lecla03">文
字003,有加span效果</span>。<br>
</div>
<br>
<div class="lecla02">第二層級屬性的DIV,002。<br>
<div class="lecla03">第三層級屬性的DIV,003。這一DIV層級內的<span
style="text-decoration: underline; font-style: italic;" class="lecla04">有span
效果文字004</span>。<br>
</div>
<br>
</div>
<br>
</div>
<div class="bacl20171028">
後一個DIV(class ="bacl20171028")。<br>
</div>
<br>
<br>
<span onclick="$(this).myPlugin171028();"
style="padding: 5px; background-color: rgb(255, 220, 185); text-decoration: underline; font-weight: 900; cursor: pointer;">看
層級變化的示意層次圖示,按我</span>。<br>
<br>
<br>
<br>
<div class="divwordmid2017102801">數位寫作基礎觀念:媒材物件的層級關係</div>
<br>
<div id="lemouex20171028">
<div>在數位文本寫作過程中,我們一定要清楚了解媒材物件與媒材物件之間的「層級關係」。層級關係共
有三種樣態:(一)父子關係,<span>(二)子孫關係</span>,(三)兄弟關係。<br>
<br>
對媒材與媒材之間的層級關係掌握清楚,才能使用操作於「層級關係」的語法,才能清清楚楚,隨心所欲地操作於任一個你意指中的媒材物件。<br>
</div>
<br>
例如,<span style="font-weight: bold;">請滑入上面文字</span>(<span
style="text-decoration: underline;">mouseover ↑</span>),
將可以使得「子孫關係」四個字,形成「視覺變化及位移效果」。換言之,使用媒材層級關係的概念和方法,來明確地達到創作者所意欲的特定媒材物件之變化。<br>
</div>
<br>
<big><span class="wocha20171028">什麼是媒材物件的「層級關係」呢?</span></big>來,請先看<span
style="text-decoration: underline; font-weight: bold;">語法結構</span>,<br>
<br>
<span style="color: red;"><div></span><br>
DIV裡面的文字,<span style="color: red;">有用span變化的文字</span>。接著的文字。<br>
<span style="color: red;"></div></span><br>
<br>
語法所形成的<span style="text-decoration: underline; font-weight: bold;">呈現</span>,<br>
<br>
<div>DIV裡面的文字,<span style="color: red;">有用span變化的文字</span>。接著的文字。
</div>
<br>
我們可以觀察,在
DIV這一媒材物件(即<div>xxx</div>)的裡面,請特別注意,一定是指在某一媒材完整語法「的裡面」,如果再有
其他媒材物件存在,那麼就形成了<span style="text-decoration: underline;">媒材物件</span>與<span
style="text-decoration: underline;">媒材裡面媒材物件</span>之間的世代性「層級關係」,亦即類似於父子
這種派生式的親屬關係樣態的關係。再細區分為父子關係,子孫關係。<br>
<br>
<big style="color: red;"><sapn>父子關係</sapn></big>是指,兩媒材物件之間,只隔著「一層」的派生關係,
有如父子般的關係。如上例的div和span,就是父子關係。<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">寫法:</span><br>
<br>
<style><br>
div.test001a {<br>
border: 1px solid black;<br>
}<br>
<br>
div.test001a > span {<br>
text-decoration: underline;<br>
color: red;<br>
}<br>
</style><br>
<br>
<span style="color: red;"><div class="test001a"></span><br>
DIV裡面的文字,<span >有用span變化的文字</span>。接著的文字。<br>
<span style="color: red;"></div></span><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">呈現:</span><br>
<br>
<div class="test001a">DIV裡面的文字,<span>有用span變化的文字</span>。接著的文字。
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
「>」這個符號,來表示兩者之間的父子關係。<br>
<br>
<big style="color: red;">子孫關係</big>是指,某一媒材物件,與它裡面所派生的「所有」的媒材物件之間的關係,換言之,
不再是局限於「一層」,所是與「所有層」的
媒材物件關係,是子孫關係。<br>
<br>
例如下列<span style="text-decoration: underline; font-weight: bold;">語法</span>:<br>
<br>
<style><br>
div.test002b {<br>
border: 1px solid black;<br>
}<br>
<br>
div.test002b >div {<br>
border: 1px solid blue;<br>
}<br>
<br>
div.test002b span {<br>
text-decoration: underline;<br>
color: red;<br>
}<br>
</style><br>
<br>
<span style="color: red;"><div class="test002b"></span><br>
第一層的<span>有span的文字</span>。<br><br>
<div><br>
這是第二層DIV內的,<span>有span的文字</span>。後接文字。<br>
</div><br>
</br><br>
<span style="color: red;"></div></span><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">呈現樣態</span>:<br>
<br>
<div class="test002b">第一層的<span>有span的文字</span>。<br>
<div> 這是第二層DIV內的,<span>有span的文字</span>。後接文字。 </div>
<br>
</div>
<br>
<br>
那麼,第一層DIV(黑色DIV)與,其裡面的所有媒材物件,包括DIV(藍色)以及span,所形成的關係,是子孫關係。理論一點的說,某一媒材物件與
其 面所派生的所有媒材之間的關係,是子孫關係。<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
中間是「 」,亦即空白,即是表示子孫關係。第一層DIV內的「所有span」都會被影響。<br>
<br>
<big style="color: red;">兄弟關係</big>,則相對簡單。是指,同一層級之間,並例的前後之從屬關係,有如兄與弟的親屬關
係樣態,是兄弟關係。<br>
<br>
例如<span style="text-decoration: underline; font-weight: bold;">語法</span>,<br>
<br>
<style><br>
div.test003c {<br>
border: 1px solid black;<br>
}<br>
<br>
div.test003c +div {<br>
background-color: lightgray;<br>
}<br>
</style><br>
<br>
<div class="test003c"><br>
前面的DIV。<br>
</div><br>
<div ><br>
後面的DIV。<br>
</div><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">呈現</span>:<br>
<br>
<div style="border: 1px solid darkred; margin-bottom: 3px;"
class="test003c">前面的DIV。
</div>
<div style="border: 1px solid darkred;">
後面的DIV。
</div>
<br>
好了,兩個DIV並沒有「裡、外」的關係,而是同一層級的前、後關係,就是兄弟關係。<br>
<br>
說明:<br>
用「+」這個符號,來標示對下個(div)發生作用。如果兩個物件之間有<br>,那麼則寫成,<br>
<br>
div +br +div {<br>
xxx<br>
}<br>
<br>
有幾個<br>,就寫幾個 +br。<br>
<br>
<br>
<br>
<div class="divwordmid2017102801">語法寫作範例與使用時機</div>
<br>
<br>
先看一個文本樣態,如下(<span style="text-decoration: underline;">滑鼠移入↓</span>),最外層
DIV設有 id 為 id=" exdiv20171028 "<br>
<br>
<br>
<div id="exdiv20171028">
這是<span style="text-decoration: underline;">有span的文字</span>。<br>
<br>
<div>
這裡是第二層div的內文。
</div>
<br>
<div>
這裡是第二個第二層的DIV內文,<span style="text-decoration: underline;">這裡是有span的文字</span>。
</div>
<br>
</div>
<div><br>
</div>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法</span>寫
入:<br>
<br>
<style><br>
<br>
/* 父子關係,<span
onclick="$('#exdiv20171028 >div').css('border', '1px solid blue');"
style="text-decoration: underline; background-color: rgb(255, 209, 164); cursor: pointer;">請
按我看呈現樣態</span> */<br>
#exdiv20171028 >div {<br>
border: 1px solid red;<br>
}<br>
<br>
/* 子孫關係,<span onclick="$('#exdiv20171028 span').css('color', 'red');"
style="text-decoration: underline; background-color: rgb(255, 209, 164); cursor: pointer;">請
按此看效果</span> */<br>
#exdiv20171028 span {<br>
color: red;<br>
}<br>
<br>
* 兄弟關係,<span
onclick="$('#exdiv20171028 +div ').css('background-color', 'gray');"
style="text-decoration: underline; background-color: rgb(255, 209, 164); cursor: pointer;">按
此看效果</span> */<br>
#exdiv20171028 +div {<br>
bacground-color: gray;<br>
}<br>
<br>
</style><br>
<br>
<br>
<big><span style="text-decoration: underline;">注意:</span></big><br>
<br>
如果有相同的參數,那麼控制權的大小分別為,<br>
style > id >選擇器 >class<br>
<br>
<br>
<div class="divwordmid2017102801">作業練習:</div>
<br>
請讓div裡面的照片傾斜。請使用父子、子孫兩種寫法,來完成。<br>
<br>
<div style="border: 1px solid black;"><br>
<div style="border: 1px solid gray; text-align: right;"><img
style="width: 240px; height: 180px; padding: 0px; border-width: 0px;" alt=""
src="https://lh3.googleusercontent.com/RiG7AGpTcLWnH36X2lrvXb_Scag-WVNv0zqQqhT8Pd3pF-o36Ur3XQOz3Vf84QeBUCkf2wgM5xWVUFYxwVEvLE-q7MJyc1G_XTvH_aXgsp5oN0Rp9o4WPFSVY-mFWgjkeLu8LVVrLrltl4Pxs5NO_N_-YdTaQlKISPbjKTwaAS8uxvsOEk9kwdc8WyRETfPy2vmx0BbLWJTGdWIChOgjIQzRRdiblpIblwH6qmnzmixS0p1stlCzdBsdXGyZm-cr0clsxVN7o5dkxc3rWvG1kQK9tBY3gWiLgjS-9R-Aj_rv_9-Uf04ESwcMGUdOcGPhBoyjjq6D2k9mH_JY-r_BIkvcXyhTVLZ79uGLICv1VKrpRMVXpOUiYjksSboIqLcoGvFoNhpCi_YREnY2uv5dTt346U3fiJj6cnW9v4iu3YX0PhmhJbtNRqDnddIGSOEnzWA0arRzRZy6TOIHYY1uZvshy6tklEmZo2ZgA-e2tq_hWPTrg0ZW0A6R3K-wm6K6Se5TsbAD86jm0vBgBXV8hX6NiTa40-FlQxWuZgbtp-oFBDLiVfkgcCNFDyTQr-keqk0cp3H5P5VU_mWI1P-mqwM2qVoSEPlV0xqWlAenCQh24E4WxIAmmUBaVKpUQttsuL_a7R9WiMvaOX1BR_ExtSpu3Q5AN3uSaa2X=w838-h628-no"><br>
</div>
<br>
</div>
<br>
<span style="text-decoration: underline; font-weight: bold;">發想參考:</span><br>
<br>
div >div >img<br>
或著<br>
div img<br>
<br>
<br>
<br>
<big style="text-decoration: underline;">選擇器的使用所產生的互動表現,<a
href="http://lmcmultimedia.blogspot.tw/2016/11/csshover.html"
target="_blank">請看教學網頁,here</a>!<br>
</big><br>
<br>
<br>
<br>
<div class="divmid20171104">進階學習:有選擇性的父子關係</div>
<br>
來,先看一個示範。<br>
<br>
<div class="divtest20171104"><br>
<div>第1個DIV<br>
</div>
<br>
<div>第2個DIV</div>
<br>
<div>第3個DIV<br>
</div>
<br>
</div>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<br>
CSS語法<br>
<br>
<style><br>
.divtest20171104 {<br>
border: 1px solid black;<br>
}<br>
<br>
.divtest20171104 <span style="color: red;">>div</span> {<br>
border: 1px solid red;<br>
margin-left: 15px;<br>
}<br>
<br>
<div id="divtest2017110401a" style="color: red; display: none;">.divtest20171104
div:nth-of-type(2) {<br>
background-color: lightgray;<br>
}
</div>
<br>
</style><br>
<br>
HTML語法<br>
<br>
<div <span style="color: red;">class="divtest20171104"</span>><br>
<br><br>
<div>第1個DIV</div><br>
<br><br>
<div>第2個DIV</div><br>
<br><br>
<div>第3個DIV</div><br>
<br><br>
</div><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">寫作要求:</span><br>
<br>
那麼,如果在這一個父子關係中,我們並不是想要<span style="font-weight: bold;">所有的</span>子DIV都被影
響,而是子DIV中的特定某一個DIV被影響,那有沒有方法呢?<br>
<br>
換言之,這是在父子關係的選擇概念中,再要求可以做出特定的篩選功能。<br>
<br>
那麼,符合 這一功能的CSS選擇器語法如下:<br>
<br>
.divtest20171104 <big><span style="color: red;">div:nth-of-type(2)</span></big>
{<br>
background-color: lightgray;<br>
}<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
如我們上面所學,父子關係,要在兩者間加入「>」這一符號。<br>
<br>
但如果我們有加上 :nth-of-type(n)
,就不用再加上「>」這一符了(但如果你要加「>」,也不影響,因為本來就是被限定為父子關係;你也可以想成電腦自動加上「>」)。<br>
<br>
.divtest20171104 div:nth-of-type(2) {<br>
background-color: lightgray;<br>
}<br>
<br>
上面這一語法,指的是 .divtest20171104 <span style="font-weight: bold;">父子層級關係</span>下
的 第幾個DIV物件被選擇了出來。<br>
:nth-of-type(n) 是指,第n個DIV要被選出來。此例為第二個要被選出來。<span
style="text-decoration: underline; font-style: italic; cursor: pointer;"
onclick="$('.divtest20171104 div:nth-of-type(2)').css('background-color', 'lightgray'); $('#divtest2017110401a').css('display', 'block');">按
此看效果</span>。(請往上看)<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">要注意小技巧:</span><br>
<br>
elemnet:nth-of-type(n) 這種寫法,<span style="font-weight: bold;">中間都不可
以有空白字元</span>。<br>
<br>
n,是指第幾個,從1算起。<br>
<br>
再來,你也可以指定單數、偶數的選擇要求。<br>
:nth-of-type(odd) 這是<span style="font-weight: bold;">奇數</span>的物件被選出來;<br>
:nth-of-type(even) 這是<span style="font-weight: bold;">偶數</span>的物件被選擇出來
了。<br>
<br>
再來,更複雜一點的。<br>
:nth-of-type(an+b) 。來,例如,:nth-of-type(2n+1) ,那麼就是1, 3,5,7,9…這樣的順序被選擇出來。<br>
<br>
n從0起算,再從1起累加。<br>
<br>
例如, :nth-of-type(3n+2),則是2, 5, 8, 11…這樣的順序。<br>
<br>
好了,好好去算數學吧!<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">練習題:</span><br>
<br>
請做出下列的互動呈現樣態(滑鼠移入↓)<br>
<br>
<div class="divse1104a"><br>
<div><br>
</div>
<br>
<div><br>
</div>
<br>
<div><br>
</div>
<br>
<div><br>
</div>
<br>
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">提示:</span>(<span
style="text-decoration: underline; cursor: pointer;"
onclick="$('#test20171104c').slideToggle(800);">看解答 click!!</span>)<br>
<br>
div div:nth-of-type(odd):hover {<br>
background-color: xxx;<br>
}<br>
<br>
div div:nth-of-type(even):hover {<br>
background-color: xxx;<br>
}<br>
<br>
<div id="test20171104c"
style="display: none; background-color: rgb(255, 238, 221);"><style><br>
.divse1104a {<br>
border: 1px solid lightgray;<br>
}<br>
<br>
.divse1104a >div {<br>
border: 1px solid red;<br>
}<br>
<br>
.divse1104a div:nth-of-type(odd):hover {<br>
background-color: #BDB76B;<br>
}<br>
<br>
.divse1104a div:nth-of-type(even):hover {<br>
background-color: #40E0D0;<br>
}<br>
</style>
</div>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-13242392744080467042017-09-09T09:28:00.002+08:002017-09-12T14:37:25.756+08:00Hint.css 2.0:快速使用的純文字 tooltips<link rel="stylesheet"
href="http://lmcdwriting.org/userfiles/lmc201708/hint.css-2.5.0/hint.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.wordbida01 {
font-family: Verdana, '微軟正黑體';
font-size: 3.91em;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.03em;
}
.wordbidb01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.51em;
font-weight: 900;
line-height: 1.7;
letter-spacing: 0.03em;
}
.wordbidb02 {
display: inline-block;
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 900;
line-height: 1.1;
letter-spacing: 0.03em;
padding: 2px 1em;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 4px solid black;
border-right: 4px solid black;
}
.imgbri {
filter: brightness(150%);
}
#taidtd20170906a td{
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 600;
line-height: 2.5;
vertical-align: middle;
text-align: center;
background-color: rgba(193, 255, 228, 0.5);
}
.testa {
width:50%;
border: 1px solid red;
line-height: 2;
}
.divword20170907a {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 500;
line-height: 1.9;
letter-spacing: 0.03em;
}
.divword20170907b {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 600;
line-height: 1.7;
letter-spacing: 0.03em;
padding: 0.5em;
}
.aa20170907 {
display: inline-block;
}
.dispinbl {
display: inline-block;
}
</style>
<br>
<br>
<br>
<br>
<br>
<div style="width: 376px;"
class="wordbida01 hint--right hint--warning hint--rounded hint--always"
aria-label="真的好用!">Hint.css
2.0</div>
<div class="wordbidb01">簡單 直接 快速 |讓tooltips 的功能發揮的很上手</div>
<br>
<br>
<span class="hint--left hint--success hint--rounded"
aria-label="快速充實資訊的利器">
<div style="border: 1px solid red; width: 565px;"
class="divword20170907a"><img style="width: 120px; height: 124px; padding: 0px; "
alt=""
src="https://lh3.googleusercontent.com/x_WF9uOtfknf4T-kzxRuvZptVA26h8ncmaJPi_i4vYpNcdGXlQZV9dZAB-zGpgZ2sTPXJY18wMUeEx8lp9hM-06nm4IbmnJY6jTv2YCTkHNlsl9_RXM4TFdoIFO6YQBZTFUMyAySTkGdXwYoYq64HY0EpdiFzUWst3SSfgHBAg_f2ZK9jWf241YB9YeW19dz47jdCluEWMIOTDZ8IljHy7I0CDB9IP-Lz95iv43pVE_dnMPaT1QCIvJvuF6pmjA1tfmLSmBTYRH5CZ9zioLX73QLkUK5IwhI6zlfVsjy3mSSCd1HJn6otSp_ko22NNWs51YvURZa7ouKEoqkDVfN5TnvQ44FNimDo73fMd0IY57S4OtciRHG7ysF3KG3HZUQU_-Tedkc5rXuiNBrLtR4ME1XYd79xRhdDK2i50TEaNOrMvbBr2dX4iWN7yoUd5zc2DmPmaxyO935Hegc7PrTFvFNF45DulLFzQJ9jcWu6SNzxCKvAMI7VYPAmu1Wbd3y_AOU89JvZuhp-lvW_1WIRt6UJg6P671Z7PZqnP_814dJIrpXJuAIXGX3EGt4jKBOSlED_grv2ZXXWI-gt29yQScWKMJXzjqbmoRZvZfLHusM2fy6sJ1p3cEriQEi-HwzUgVkWsu_cnnJbsDTu-Mb8Zav_uQi2IVJcCkn3hQEJLFZEJo=w507-h525-no"
align="left" hspace="5">一、純CSS語法套件。<br>
二、純文字式的tooltips。<br>
三、只用<span>來框住編輯元素即可。<br>
四、<span class="hint--right hint--info hint--always hint--rounded"
aria-label="可直接當對話框來使用!" style="text-decoration: underline;">可以設定直接呈現的功
能。</span><br clear="all">
</div>
</span>
<br><br>
<br><br>
<span style="font-weight: 600; font-size: 1.04em;" class="hint--top-left hint--error hint--always" aria-label="快速使用hint.css">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQXrfEoK5JI?rel=0" frameborder="0" allowfullscreen></iframe></span>
<br>
<br>
<br>
<br>
<div class="wordbidb02"><big style="color: rgb(255, 153, 0);">一、快速上手實作</big></div>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">設置CSS:</span><br>
<br>
/* 請放置<head></head>之間或<body>之後 * /<br>
<br>
<link rel="stylesheet"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/hint.css-2.5.0/hint.css"><br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">使用方法:</span><br>
<ol style="padding-left: 22px;">
<li>在任何編輯物件上,如文字、圖像、div、iframe…等,都可以使用。</li>
<li>文字(inline物件),img、iframe等inline-block類編輯物件,請外層加上<span>xxx<
/span>
。例如
<span>這是範例文字</span>。</li>
<li>在<span>裡加人會產生作用的 class,以及aria-label="xxx",xxx即是要跑出的文字。</li>
<li>其他塊狀編輯物件,div、p、H 等,<span
style="text-decoration: underline; color: rgb(0, 153, 0);">請一定要設定寬度(px)</span>,
再於物件外層加上<span>xxx</span>,於<span>中加入作用class以及aria-label
=
"xxx"。 否則會以內文長度為寬度。<span style="font-weight: bold;">★ hint.css會把作用物件
inline-block
化 ★</span>。<br>
</li>
<li>表格,請在TD內容前後加<span style="width: 100%;">td內容xxx</span>
, 亦即要在span裡面加入 style="width: 100%;",再加入作用的class,這樣「整個格子」才會是作用範圍。</li>
<li><span>裡面如有設style,例如字體,會作用於出現的樣貌。<br>
</li>
</ol>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">快速示範一:</span><br>
<br>
<span
style="font-weight: bold; text-decoration: underline; font-style: italic;"
class="hint--right hint--error" aria-label="Hint.css的效果!">這是有 Hint.css
作用的文字</span><br>
<br>
〔語法〕:<br>
<br>
<span<br>
style="font-weight: bold; text-decoration: underline; font-style:
italic;"<br>
class="<span style="color: red;">hint--right hint--error</span>"
aria-label="<span style="color: red;">Hint.css的效果!</span>"><br>
這是有 Hint.css作用的文字<br>
</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">快速示範二:</span><br>
<br>
<span aria-label="區塊型編輯物件" class="hint--left hint--success">
<div
style="border: 1px solid gray; width: 349px; line-height: 2; font-family: '微軟正黑體';">這
是一個DIV。請要設定寬度,才能有效作用。<br>
區塊型編輯物件,請要設定寬度,否則會被inlin-block化,<br>
這樣寬度就會被CSS語法改變。 / 滑鼠here /<br>
</div>
</span><br>
<br>
<br>
〔語法〕:<br>
<br>
<span <span style="color: rgb(204, 0, 0);">aria-label="區塊型編輯物件"
class="hint--left hint--success"</span>><br>
<div style="border: 1px solid gray; <span
style="color: rgb(204, 0, 0);">width: 349px;</span> line-height: 2;
font-family: '微軟正黑體';"><br>
這是一個DIV。請要設定寬度,才能有效作用。<br><br>
區塊型編輯物件,請要設定寬度,否則會被inlin-block化,<br><br>
這樣寬度就會被CSS語法改變。 / 滑鼠here /<br><br>
</div><br>
</span><br><br>
<br>
<br>
<br>
<br>
<br>
<div class="wordbidb02"><big style="color: rgb(255, 153, 0);">二、功能作用</big></div>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">出現位置:</span><br>
<br>
<table style="text-align: left; width: 100%;" id="taidtd20170906a"
border="0" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td style="width: 180px;"><span style="width: 100%;"
class="hint--top-left hint--error" aria-label="上左的效果!">上左</span><br>
</td>
<td style="width: 180px;"><span style="width: 100%;"
class="hint--top hint--info" aria-label="上的效果!">上<br>
</span></td>
<td style="width: 180px;"><span style="width: 100%;"
class="hint--top-right hint--warning" aria-label="上右的效果!">上右</span><br>
</td>
</tr>
<tr>
<td style=""><span style="width: 100%;"
class="hint--left hint--success" aria-label="左的效果!">左<br>
</span></td>
<td style="vertical-align: top;"><br>
</td>
<td style=""><span style="width: 100%;"
class="hint--right hint--error" aria-label="右的效果!">右<br>
</span></td>
</tr>
<tr>
<td style=""><span style="width: 100%;"
class="hint--bottom-left hint--info" aria-label="下左的效果!">下左</span><br>
</td>
<td style=""><span style="width: 100%;"
class="hint--bottom hint--success" aria-label="下的效果!">下</span><br>
</td>
<td style=""><span style="width: 100%;"
class="hint--bottom-right hint--warning" aria-label="bottom-right">bottom-right</span>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">位置語法:</span><br>
<br>
上左: class=" hint--top-left "<br>
上: class=" hint--top "<br>
上右: class=" hint--top-right "<br>
左: class=" hint--left "<br>
右: class=" hint--right "<br>
下左: class=" hint--bottom-left "<br>
下: class=" hint--bottom "<br>
下右: class=" hint--bottom-right "<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">內容語法:</span><br>
<br>
aria-label="裡面可以填寫內容"<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">顏色語法(請加入
class裡面):</span><br>
<br>
<span style="color: red;">紅色</span>: hint--error<br>
<span style="color: rgb(51, 204, 255);">藍色</span>: hint--info<br>
<span style="color: rgb(204, 153, 51);">橘色</span>: hint--warning<br>
<span style="color: rgb(51, 204, 0);">綠色</span>: hint--success<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">位置、顏色共現範例:
class="hint--top hint--warning"</span><br>
<br>
<span class="hint--top hint--warning" aria-label="拉拉山的水蜜桃">
<img style="width: 180px; height: 120px;" class="imgbri" alt=""
src="https://farm5.staticflickr.com/4287/34757133373_159d1dcbd6_o.jpg"></span><br>
<br>
〔語法〕:<br>
<br>
<span style="color: rgb(204, 0, 0);"><span class="hint--top
hint--warning" aria-label="拉拉山的水蜜桃"></span><img style="width:
180px; height: 120px;" alt=""
src="https://farm5.staticflickr.com/4287/34757133373_159d1dcbd6_o.jpg"><span
style="color: rgb(204, 0, 0);"></span></span><br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">再強調一次:</span><br>
一、文字、圖像( img )、以及影音( iframe
)等inline以及inline-block的編輯物件,請外層加入<span>才有作用。<br>
二、其他block的編輯物件,div、p 等,如要固定,請一定要設定寬度,並在其物件外層加入<span>,並加入作用class以及
aria-label,即可。<br>
三、TD的使用注意,在td內文外層加上<span>,span寬度設100%,請看語法:<br>
<br>
<td <span style="color: rgb(102, 102, 102);">style="width: 180px;"</span>><span
<span style="color: rgb(204, 0, 0);">style="width: 100%;"</span><br>
class="hint--top-left hint--error"
aria-label="上左的效果!">上左</span><br><br>
</td><br>
<br>
<br>
<br>
<br>
<br>
<div class="wordbidb02"><big style="color: rgb(255, 153, 0);">三、進階使用</big></div>
<br>
<br>
<br>
請將下列代碼加入到class裡面,可以需要加上多個,中間有空白鍵即可:<br>
<br>
<span class="hint--left hint--info hint--always" aria-label="直接呈現的效果">hint--always</span>
//直接呈現<br>
<br>
hint--rounded
<span><span class="hint--right hint--success hint--always hint--rounded"
aria-label="圓角框直接呈現的效果">//圓角框 </span><br>
<br>
<br>
hint--no-animate
//無動態效果<br>
<br>
<br>
hint--small
//小型框<br>
<br>
hint--medium
//中型框<br>
<br>
<br>
hint--large
<span
class="hint--right hint--error hint--always hint--rounded hint--large"
aria-label="圓角直接呈現大型的效果。語法:class='hint--right hint--error hint--always hint--rounded hint--large'">//
大型框</span><br>
<br>
<br>
<br>
<br>
<br>
<br>
</span>
<span style="width: 100%;"
class="divword20170907b hint--top hint--info hint--rounded hint--medium hint--no-animate"
aria-label="共有五種效果共同存在">
<div style="border: 1px solid red; padding: 0.5em;">說明:把所有想要的功能
代碼,都加入到class裡面去,請移入。例:<br>
class="hint--top hint--info hint--rounded hint--medium
hint--no-animate" <br>
aria-label="共有五種交果共同存在"<br>
</div>
</span>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="wordbidb02"><big><span style="color: rgb(255, 153, 0);">四、需求
改造</span></big></div>
<br>
<br>
<br>
<span
onmouseover="$(this).removeClass('hint--bottom-left hint--info hint--always hint--rounded hint--large');"
onmouseout="$(this).addClass('hint--bottom-left hint--info hint--always hint--rounded hint--large');"
class="dispinbl hint--bottom-left hint--info hint--always hint--rounded hint--large"
aria-label="請滑鼠移到到DIV,直接呈現的Hint.css就會消失">
<div style="border: 1px solid gray; width: 576px; line-height: 2;">如果你想要
先直接呈現,然後滑鼠移入後
tooltips反而消失,這樣的功能效果,要如何來處置呢?</div>
</span>
<br>
<br>
<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<br>
<span<br>
<span style="color: rgb(204, 0, 0);">onmouseover</span>="$(this).removeClass('hint--bottom-left
hint--info hint--always hint--rounded hint--large');"<br>
<span style="color: rgb(204, 0, 0);">onmouseout</span>="$(this).addClass('hint--bottom-left
hint--info hint--always hint--rounded hint--large');"<br>
class="<span style="color: rgb(204, 0, 0);">dispinbl</span>
hint--bottom-left hint--info hint--always hint--rounded hint--large"<br>
aria-label="請滑鼠移到到DIV,直接呈現的Hint.css就會消失"><br>
<div style="background-color: lightgray;">
<div style="border: 1px solid gray; width: 576px; line-height:
2;">如果你想要<br>
先直接呈現,然後滑鼠移入後<br>
tooltips反而消失,這樣的功能效果,要如何來處置呢?</div><br>
</div>
</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">保持
inline-block 狀態的CSS:</span><br>
<br>
<style><br>
.dispinbl {<br>
display: inline-block;<br>
}<br>
</style><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">構思說明:</span><br>
<br>
一、在span裡面加入,onmouseover 以及 onmousout 這二個互動語法。移入時把之前設好的 hint.css
功能代碼class 抽掉,於是之前設好的效果就不見了。滑鼠移出時,再「恢復」之前的class設定,於是hint.css的效果又出來了。<br>
二、*注意*span裡面要記得加入inline-block功能的class。這樣一旦啟動onmouseover時,hint.css
的class被抽掉時,span還能保持inline-block的狀態。版面才不會變動。<br>
<br>
<br>
<br>
<br>
<br>
<div class="wordbidb02">教學影音:<br>
</div>
<br>
<br>
<span class="hint--left hint--error" aria-label="Hint.css的效果(二)!"><iframe width="560" height="315" src="https://www.youtube.com/embed/mOy1bKP3gxo?rel=0" frameborder="0" allowfullscreen></iframe></span><br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<br>
<span style="color: rgb(204, 0, 0);"><span class="hint--left
hint--error" aria-label="Hint.css的效果!"></span><br>
<iframe<br>
src="https://www.youtube.com/embed/va9eQWi-A7s?rel=0"<br>
allowfullscreen="" frameborder="0" height="315"
width="560"></iframe><br>
<span style="color: rgb(204, 0, 0);"></span></span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
同樣的,在video iframe的語法外層加入有hint.css 效果的<span> 。<br>
<br>
<br>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-28396195012041773002017-09-02T20:12:00.000+08:002017-09-13T15:02:09.895+08:00jQuery UI Dialog Box 互動的對話框
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$( function() {
$( "#uidia20170901a" ).dialog(
{
width: 424,
});
});
</script>
<script>
function diydiaboxa01() {
$( function() {
$( "#diymulti01" ).dialog(
{
width: 590,
show: { effect: "blind", duration: 800 },
classes: {
"ui-dialog": " diydacl02"},
modal: true
});
});
};
</script>
<style>
#delimg20170902 img {
border-width: 0px;
margin: 0px;
padding: 0px;
}
#uidia20170901a {
font-family: Verdana, '微軟正黑體';
}
#uidia20170901ax {
font-family: Verdana, '微軟正黑體';
position: relative;
}
#uidia20170901ax img:nth-of-type(2) {
border-width: 0px;
padding: 0px;
margin: 0px;
position: absolute;
bottom: -100%;
right: 30px;
opacity: 0;
transition: 0.7s linear;
}
#uidia20170901ax:hover img:nth-of-type(2) {
opacity: 1;
}
.opacy020170901 {
opacity: 0;
transition: 0.7s linear;
}
.addopacy020170901 {
opacity: 1;
}
.filterbri {
filter:brightness(200%);
}
.divword20170901 {
font-family: Verdana, '微軟正黑體';
font-size: 1.71em;
font-weight: 800;
letter-spacing: 0.05em;
width: 73%;
line-height: 1.4;
}
.divword20170901b {
font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 1.7;
position: relative;
}
.divword20170901b img {
border-width: 0px;
margin: 0px;
padding: 0px;
position: absolute;
top: -280%;
left: 440px;
}
.divword20170901 span{
font-family: Verdana, '微軟正黑體';
font-size: 1.41em;
font-weight: 800;
letter-spacing: 0.05em;
}
.arrow_box {
position: relative;
background: #d5b4af;
border: 2px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 30%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(213, 180, 175, 0);
border-left-color: #d5b4af;
border-width: 14px;
margin-top: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 18px;
margin-top: -18px;
}
.divword20170901c{
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.8;
}
.divmidti20170901{
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 1.3;
border: 2px solid black;
}
#diadiv02B {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.6;
background-color: rgba(199, 199, 14, 0.6);
padding: 6px;
}
#diadiv02c {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.6;
background-color: rgba(199, 199, 14, 0.6);
padding: 3px;
}
#diadiv03A {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.6;
background-color: rgba(225, 225, 185, 0.6);
padding: 6px;
}
.clabgc0a {
background-color: rgba(152, 152, 152, 0.45);
width: 80%;
}
.diydacl01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.07em;
font-weight: 600;
background-color: lightgreen;
}
.diydacl02{
background-color: rgba(255, 255, 185, 0.95);
}
#diymulti01 {
border: 1px solid darkred;
text-align: center;
}
.spanword20170802a {
display: inline-block;
line-height: 1.6;
font-size: 14px;
font-weight: 600;
background-color: rgba(152, 152, 152, 0.45);
padding: 0px 5px;
border-bottom: 1px solid black;
border-right: 1px solid black;
cursor: pointer;
}
</style>
<div id="delimg20170902">
<br>
<br>
<br>
<br>
<div class="divword20170901 arrow_box">
<span>jQuery UI Dialog Box</span><br>
互動的對話框|自動跳出|按一下跳出<br>
</div>
<div class="divword20170901b">
各式各樣的媒材,文字、照片和影音,都可放進對話框<img style="width: 120px; height: 110px;" alt=""
src="https://lh3.googleusercontent.com/1DmeV6IeW5ochGtMU4SqFuxOAvM-qNGcg_txEF3eQQgveSX1xlxDwegEffPZQiORJqz24SDmstxv9nEMmpE32cjotboB_YIz55RsCdo1RBBOWVY7Hu42AjMMe3l-0PkHYWAiMfGZhaiSCvosJKOUw-bKigVODr0PvvzS8fcJFwulQ0t_bsdAr5s-FU6ytqJzMtBJbSlcKiKvZ51klo0uSdGRtB9joUivc87PwRBRpO0mEIGsvvmrR1B75uKfo4NFgb-dyvfoNiKd7QYNO1qgIZrcliMR8LMbnsuYEQNQfxDU_FvaVCTfcUm0UoyWciNH5vXGwm2bv51EgTR3pj_PFCn8Ql4C8mBcIWqT9oxoSrdrGZEV34Qq1y22DO6duf43j3aIb7urQw0HIr-TtmashD5PkN6ObEE_isAdQNGig5BCOH5tTBJcEUeA9-4s5pfTE-HMuYA9YckWH-Y-8T0sJYk__xqRDeCDBMHzh4EJuVq38JVfYfDVdRL_TkaDZGw9RYOsj6dvX6kV5_PfrCNhxzz1GgHw5yAoJiSqnnRvZbirUK2s0A3EaIakDj3EbMogVWL6_EdYBX2mhiUX_4OqO97xuIG5Rxmz-ks_E6Ro5WuHQSVKLRPeBg=w226-h207-no"><br>
</div>
<br>
<br>
<div class="divword20170901c">
互動的對話框,是最常見的能動文本寫作技巧之一。<br>
數位文本的能動特色,使得在對文本寫作的構思上,產生了許多傳統靜態線性文本所沒有的「文本呈現形式」。只有掌握了這些新的形式的寫作技巧,才能讓數位文
本在意義表現上真正凸顯出與傳統文本的不同特色。<br>
對作者而言,談數位文本,一個先決觀念是:技術先於意義!<br>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="divmidti20170901">自動跳出 dialog box</div>
<br>
<br>
<big style="color: rgb(255, 102, 0);">一、請將下列jquery程式碼及CSS複製到<head>
</head>之間或<body>之後:</big><br>
<br>
<script
src="https://code.jquery.com/jquery-1.12.4.js"></script><br>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br>
<link rel="stylesheet"<br>
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><br>
<br>
<br>
<br>
<big style="color: rgb(255, 102, 0);">二、要跳出來的內容設置於DIV內,請加上ID,下例:</big><br>
<br>
<div style="width: 424px;" id="uidia20170901ax"><img
style="width: 180px; height: 165px;" class="filterbri" alt=""
src="https://lh3.googleusercontent.com/1DmeV6IeW5ochGtMU4SqFuxOAvM-qNGcg_txEF3eQQgveSX1xlxDwegEffPZQiORJqz24SDmstxv9nEMmpE32cjotboB_YIz55RsCdo1RBBOWVY7Hu42AjMMe3l-0PkHYWAiMfGZhaiSCvosJKOUw-bKigVODr0PvvzS8fcJFwulQ0t_bsdAr5s-FU6ytqJzMtBJbSlcKiKvZ51klo0uSdGRtB9joUivc87PwRBRpO0mEIGsvvmrR1B75uKfo4NFgb-dyvfoNiKd7QYNO1qgIZrcliMR8LMbnsuYEQNQfxDU_FvaVCTfcUm0UoyWciNH5vXGwm2bv51EgTR3pj_PFCn8Ql4C8mBcIWqT9oxoSrdrGZEV34Qq1y22DO6duf43j3aIb7urQw0HIr-TtmashD5PkN6ObEE_isAdQNGig5BCOH5tTBJcEUeA9-4s5pfTE-HMuYA9YckWH-Y-8T0sJYk__xqRDeCDBMHzh4EJuVq38JVfYfDVdRL_TkaDZGw9RYOsj6dvX6kV5_PfrCNhxzz1GgHw5yAoJiSqnnRvZbirUK2s0A3EaIakDj3EbMogVWL6_EdYBX2mhiUX_4OqO97xuIG5Rxmz-ks_E6Ro5WuHQSVKLRPeBg=w226-h207-no"
align="left" hspace="5"><span
style="text-decoration: underline; font-weight: bold;">jQuery UI 的
Dialog Box</span><br>
<br>
基本上是Dialog Box這種互動模態<br>
的「原型」,<br>
如果你有了使用的上手經驗,<br>
如果你對運作流程有一定理解,<br>
就可以「思考」出更不同的表現形式。<br>
<img style="width: 140px;" alt=""
src="https://lh3.googleusercontent.com/NLojAxcCSFRaG8TjHAmj1x3viJfX2AyCcnOYNHhvqi6oolQobqZcROFzVzyIgMkiBysdeVKp32tmzO6wrcOHoSnAWpCSG3J1baAIMT-QlaFbd_O6wdQt7j0HF8unJxlo6YasU0x3bePvtHl-W5dbgdrJbH2J7FJRZ05sIPwCBLKZS6TJbMO4C1Jdc1m10CDa5FwplcknDKU0xHERPQDx37fcCmaX_GKj52F0x7vFOFgD-_j64SoZFXvwiJ0GqtASpV7ckEy5pRIRnqqZwM0ubV4paj4zEDoDBEgNQitu29RiD3Lym_RiLuzu62xkWWB2PInqRchAy49oUg4oA_AcdjucioiVIVTwR4etXrEnzmXBA6G9IAPYkfKtnb4eN4z2ISJlEZ_c9xUMDxQQDgjZ-E0mXGlaHw30j9O4W4DzLn3i5BpJdRgqSACLnDW8hT1xDJbMG5GCXzaOrxXoI79roBU8BT5jkovRheg4ZEjaQ90GFP9Qag8-xknI2tpoFJfdw4bvSQQhRkDto32uKukI4P5lDjRIICvVlD-vgaQORQRH6eFwRBC_FrmJfOA8MZOqzj1eOPOD9boKK4ItE28i9xOKbnmFDc216vcnCPhYPayN7KY6LzdM6Mk8AmzvojzPNDCmF6wvxo48uNtyTHyFshZrXaKj3U05QU_aolcJX8FjVcU=s200-no"><br>
</div>
<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔DIV語法〕:</span><br>
<br>
<big style="color: rgb(0, 153, 0);" class="opacy020170901"><div
style="display: none;"></big><br>
<div style="width: 70%;" class="clabgc0a">
<div <span style="color: red;">id="uidia20170901a"</span>
style="width: <span style="color: red;">424</span>px;"><br>
<img style="width: 180px;
height: 165px;"<br>
alt=""<br>
src="圖像網址"<br>
align="left" hspace="5"><span<br>
style="text-decoration: underline; font-weight: bold;">jQuery UI 的<br>
Dialog Box</span><br><br>
<br><br>
基本上是Dialog Box這種互動模態<br><br>
的「原型」,<br><br>
如果你有了使用的上手經驗,<br><br>
如果你對運作流程有一定理解,<br><br>
就可以「思考」出更不同的表現形式。<br><br>
</div><br></div>
<big style="color: rgb(0, 153, 0);" class="opacy020170901"></div></big><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔注意事項〕:</span><br>
一、請留意所設置DIV的寬度,此例為424px。這樣DIV的版面才能至少和dialog box相同。但最好多加28px。<br>
二、因為是要跳出來的內容,所以請在文件的最後進行編輯寫作,才不會影響正常版面布局。<br>
三、最後再於其外層加上一個<span style="color: red;"><div style="display:
none;"></span>xxx<span style="color: red;"></div></span>,使其消失於版
面(但資料還在)。<br>
四、<span onclick="$('.opacy020170901').toggleClass('addopacy020170901');"
style="text-decoration: underline;">按此看上例語法之示範。</span><br>
<br>
【進階補充】電腦會把內文DIV,即灰色部分,以inline-block的結構抓到dialog
box裡去。所以對內文DIV的變化,一般而言都會被保留下來。<br>
<br>
<br>
<big><span style="color: rgb(255, 102, 0);"> 三、請寫入下列dialog
box驅動程式於<head></head>之間或<body>之後:</span><br>
</big><br>
<script><br>
$( function() {<br>
$( "<span style="color: red;">#uidia20170901a</span>"
).dialog(<br>
{<br>
width: <span style="color: red;">424</span>
//設定對話框寬度<br>
});<br>
});<br>
</script><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔說明〕:</span><br>
<span style="color: red;">一、紅字部分</span>就是上面範例DIV的 ID。請一定要加入 # 字號。<br>
二、要為dialog box 設置寬度,<span style="font-weight: bold;">至少</span>要和上範例的<span
style="color: red;">寬度相同</span>。或稍微加大一
點也可以,例430px。<span style="font-weight: bold;">跟據我的經驗值,多加上28px,會很不錯</span>。<br>
這樣網頁一打開,dialog box就會跳出來,而內容正是上範例的DIV。<br>
三、如果值設定的太小,會有捲軸跑出來。如果不想有,就加大寬度設定,建議值:請多加28px。<br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0WGDicEWit8?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<big style="color: rgb(255, 102, 0);">四、如果想要改變跳出來時的位置,請加人下列參數:</big><br>
<br>
<script><br>
$( function() {<br>
$( "#uidia20170901a" ).dialog(<br>
{<br>
width: 424,<br>
<span style="color: red;">position: { my: "center-50% center-80%", at:
"center center", of: window }</span> //設定出現位置<br>
});<br>
});<br>
</script><br>
<br>
<br>
<span
onclick="$( '#uidia20170901a' ).dialog( 'option', 'position', { my: 'center-50% center-80%', at: 'center center', of: window } );"
style="text-decoration: underline;">按我看位置更動的效果 </span><br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔說明〕:</span><br>
一、預設值是:position: { my: "center center", at: "center center", of: window
}<br>
二、可翻譯為my 我的跳出對話框的中間center(左右)、中間center(上下),對準於 at ,整個視窗(window)的
中間center(左右)中間center(上下)。<br>
三、我們更動為:position: { my: "center-50% center-80%", at: "center center",
of: window }<br>
四、xx%是以dialog box的長寬來當作計算標準。可以是正、負,例center+50% center-30%。<br>
<br>
<br>
<br>
<br>
<div class="divmidti20170901">按一下就跳出 Dialog Box</div>
<br>
<br>
<br>
<br>
<big style="color: rgb(255, 102, 0);">一、請copy下列 jquery
程式碼至<head></head>之間或<body>之後,如上例已有使用,就可省略:</big><br>
<br>
<script
src="https://code.jquery.com/jquery-1.12.4.js"></script><br>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br>
<link rel="stylesheet"<br>
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><br>
<br>
<br>
<big style="color: rgb(255, 102, 0);">二、用DIV做出要跳出的內容,如同上例,要設ID以及注意寬度數據:</big><br>
<br>
<br>
<div style="width: 185px;" id="diadiv02c"> 這是div的內容。<br>
ID 是 #diadiv02B。<br>
寬度是 185px。<br>
<img style="width: 170px; height: 113px;" alt=""
src="https://farm5.staticflickr.com/4439/36776656481_d58544d9e4_o.jpg"><br>
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔注意事項〕:</span><br>
同樣的,<br>
一、因為是要跳出來的內容,所以請在文件的最後進行編輯寫作,才不會影響正常版面布局。<br>
二、最後再於其外層加上一個<span style="color: red;"><div style="display:
none;"></span>xxx<span style="color: red;"></div></span>,使其消失於版
面(但資料還在,讓程式來抓資料)。<br>
<br>
<br>
<big style="color: rgb(255, 102, 0);">三、在要按下去的媒材內設置驅動程式:</big><br>
<br>
<big>onclick=" $('#diadiv02B').dialog({width: <span
style="color: red;">195</span>}); "</big><br>
<br>
<br>
<span onclick="$('#diadiv02B').dialog({width: 195});"
style="text-decoration: underline;">互動範例文字,請按我</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔上例語法〕:</span><br>
<span onclick="$('#diadiv02B').dialog({width: 195});"<br>
style="text-decoration: underline;">互動範例文字,請按我</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔說明〕:</span><br>
一、<span style="color: red;">寬度設定</span>為195px。我們之前提過,寬度至少要和DIV同寬,或著為了版面美
觀,可以稍微多加一點。建議值:28px。<br>
二、onclick可以放在任可編輯元素中,span, div, img, iframe等等。請看教學video。<br>
<br>
<br>
<br>
<big style="color: rgb(255, 102, 0);">四、想要設置對話框的跳出位置:</big><br>
<br>
<br>
<big>onclick=" $('#diadiv03A').dialog({width: 195, <span
style="color: red;">position: {
my: 'center+100% center-100%', at: 'center center', of: window }</span>});
"</big><br>
<br>
<br>
<div
style="border: 1px solid gray; font-family: '微軟正黑體'; font-weight: 600; line-height: 1.6; cursor: pointer;"
onclick="$('#diadiv03A').dialog({width: 195, position: { my: 'center+100% center-100%', at: 'center center', of: window }});">Dialog
Box互動範例,在DIV按下,請按我。</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔說明〕:</span><br>
語法結構與「自動跳出」的前範例同。只是裡面的引號從 " (雙引號)改成 ' (單引號)。請看教學影音詳解。<br>
<br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/imNtOh7OoTY?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br><br>
<div class="divmidti20170901">進階參數補充</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔class〕:</span>
//設定dialog box布局的class<br>
<br>
$( ".selector" ).dialog({<br>
classes: {<br>
"ui-dialog": "highlight"<br>
}<br>
});<br>
<br>
<br>
Default:<br>
{<br>
"ui-dialog": "ui-corner-all",<br>
"ui-dialog-titlebar": "ui-corner-all",<br>
}<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔show
& hide〕:</span> //出現、消失的動態方式<br>
<br>
$( ".selector" ).dialog({<br>
show: { effect: "blind", duration: 800 }<br>
});<br>
<br>
<br>
$( ".selector" ).dialog({<br>
hide: { effect: "explode", duration: 1000 }<br>
});<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔modal〕:
</span> //產生遮罩<br>
<br>
Default: false<br>
<br>
$( ".selector" ).dialog({<br>
modal: true<br>
});<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔多參數整合語法範
例〕:</span><br>
<br>
<br>
<div style="display: none;">
<div style="width: 424px;" id="uidia20170901a"><img class="filterbri"
style="width: 180px; height: 165px;" alt=""
src="https://lh3.googleusercontent.com/1DmeV6IeW5ochGtMU4SqFuxOAvM-qNGcg_txEF3eQQgveSX1xlxDwegEffPZQiORJqz24SDmstxv9nEMmpE32cjotboB_YIz55RsCdo1RBBOWVY7Hu42AjMMe3l-0PkHYWAiMfGZhaiSCvosJKOUw-bKigVODr0PvvzS8fcJFwulQ0t_bsdAr5s-FU6ytqJzMtBJbSlcKiKvZ51klo0uSdGRtB9joUivc87PwRBRpO0mEIGsvvmrR1B75uKfo4NFgb-dyvfoNiKd7QYNO1qgIZrcliMR8LMbnsuYEQNQfxDU_FvaVCTfcUm0UoyWciNH5vXGwm2bv51EgTR3pj_PFCn8Ql4C8mBcIWqT9oxoSrdrGZEV34Qq1y22DO6duf43j3aIb7urQw0HIr-TtmashD5PkN6ObEE_isAdQNGig5BCOH5tTBJcEUeA9-4s5pfTE-HMuYA9YckWH-Y-8T0sJYk__xqRDeCDBMHzh4EJuVq38JVfYfDVdRL_TkaDZGw9RYOsj6dvX6kV5_PfrCNhxzz1GgHw5yAoJiSqnnRvZbirUK2s0A3EaIakDj3EbMogVWL6_EdYBX2mhiUX_4OqO97xuIG5Rxmz-ks_E6Ro5WuHQSVKLRPeBg=w226-h207-no"
align="left" hspace="5"><span
style="text-decoration: underline; font-weight: bold;">jQuery UI 的
Dialog Box</span><br>
<br>
基本上是Dialog Box這種互動模態<br>
的「原型」,<br>
如果你有了使用的上手經驗,<br>
如果你對運作流程有一定理解,<br>
就可以「思考」出更不同的表現形式。<br>
</div>
<div style="width: 185px;" id="diadiv02B"> 這是div的內容。<br>
ID 是 #diadiv02B。<br>
寬度是 185px。<br>
<img style="width: 170px;" alt=""
src="https://farm5.staticflickr.com/4439/36776656481_d58544d9e4_o.jpg"><br>
</div>
<br>
<div style="width: 185px;" id="diadiv03A">
這是第二個div的內容。<br>
ID 是 #diadiv03A。<br>
寬度是 185px。<br>
<img style="width: 170px;" alt=""
src="https://farm5.staticflickr.com/4373/36367944865_09656b1ab3_o.jpg"><br>
</div>
</div>
<script><br>
function <span style="color: red;">diydiaboxa01()</span> {<br>
<br>
$( function() {<br>
$( "#diymulti01" ).dialog(<br>
{<br>
width: 588,<br>
show: { effect: "blind", duration: 800 },<br>
classes: {<br>
"ui-dialog": "ui-corner-all <span style="color: red;">diydacl02</span>"},<br>
modal: true
<br>
});<br>
});<br>
<br>
};<br>
</script><br>
<br>
<br>
<span class="spanword20170802a" onclick="diydiaboxa01();">click
物件,請按我!看影音:</span><br>
<br>
<br>
onclick=" <span style="color: red;">diydiaboxa01();</span> "<br>
<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">〔使用經驗值):</span><br>
一、如果想變化「內文區」,即紅色框線內的變化,必須在id下參數。此例要設 #diymulti01 { }。<br>
二、內文區有預設 padding 值,左右大約各有14px,所以共28px。因之,在設定dialog box
寬度時,宜在DIV寬度值再多加上28px 值,上文已提及。此例,560+28=588。<br>
三、classes: { "ui-dialog": "ui-corner-all diydacl02" }, 所控制的,是「整個」dialog
box的變化。例如 .diydacl02 {} 有設背景色,所以整個dialog box都呈現背景色(淡黃)。<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="display: none;">
<div class="diydacl01" id="diymulti01"><iframe
src="https://www.youtube.com/embed/c80sS-EfSTI?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe><br>
輕輕走過,靜靜聽過,慢慢想過。安沈中有一種力量。<br>
</div>
</div>
<br>
<br>
</div>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com1tag:blogger.com,1999:blog-4179719354980918481.post-13788780953942280892017-08-23T17:49:00.002+08:002017-09-14T17:11:08.680+08:00tooltipster 4.0版。超好用的tooltips模組。
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/tooltipster.bundle.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/js/tooltipster.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('.tooltipster').tooltipster();
});
</script>
<script>
$(document).ready(function() {
$('.tps20170822a').tooltipster({
side:['left'],
animation: 'fall',
theme: 'tooltipster-punk',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
<script>
$(document).ready(function() {
$('.tps20170822b').tooltipster({
side:['top'],
animation: 'swing',
theme: 'tooltipster-noir',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
<script>
$(document).ready(function() {
$('.tps20170822c').tooltipster({
side:['right'],
animation: 'grow',
theme: 'tooltipster-light',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
<script>
$(document).ready(function() {
$('.tps20170822d').tooltipster({
side:['top'],
animation: 'slide',
interactive: true,
contentAsHTML: true,
theme: 'tooltipster-shadow',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 90;
return position;
}
});
});
</script>
<script>
$(document).ready(function() {
$('.tps20170822e').tooltipster({
side:['top'],
animation: 'fall',
theme: 'tooltipster-light',
interactive: true, //這一行,啟動滑鼠可上移到內容的功能。
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 90;
return position;
}
});
});
</script>
<script>
$(document).ready(function() {
$('.tps20170822f').tooltipster({
side:['right'],
animation: 'swing',
theme: 'tooltipster-noir',
interactive: true, //這一行,啟動滑鼠可上移到內容的功能。
trigger: 'click', //這一行,將以click來啟動功能。
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
<style>
.divbig20170822 {
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
}
.divbig20170822 span{
font-family: Verdana, '微軟正黑體';
font-size: 3.51em;
font-weight: bold;
letter-spacing: 0.03em;
float: left;
}
.divbig20170822b{
font-family: Verdana, '微軟正黑體';
font-size: 2.01em;
font-weight: bold;
letter-spacing: 0.03em;
border: 1px solid rgba(128, 128, 4, 0.7);
background-image: url(https://lh3.googleusercontent.com/bETKEa70QXw8rQ7wZkw3XRM14pzQOwK2R9OgWLJinArfppJnvTuRUVEZxFXwQ7Nv3wWCS043oxBkVH5jBuYZY76WWHjKZaqyJSfhA-awNuiRk19ccfdTnFyrx0AjaiI1YLyyq7VbuRFj_yBKmz7gCnnijT-CDwewZIK9-cj5kn6c0utHskVKyK5zpAT8PgBWeaOYEPGiKrqBxZ30ntE4kY7LQcKaC0VpklDe207Axkw6ytUgfMrirj6bqiuocDO75OtlYBQYEi_s_5DbW2xQglHunldT7-oaidz5j_HM7eq3pWFDDNN1fA5bjMu7DkXpj___fnTsuaRKRprOzijv01FASfIzkkZMUgpAh9rPCJUjnDSMAsowa8oqZiCSsh_zTXfgPwR8RFfPqwDuwrJcfub7PcYwu7t7Bn4knb3q72HnSAuubQUJ7hpSrTxdJVrZfpI-3TUXTgEpO0dUxWCQG3dRXoCgm2XNRoGM6FmcQFiavvOpWjVDleVHcYFZVJRu00RsySUtowG140Y0AdIaXL1xWlpm9sKbJF5guxZRKichzRS_Hu49oDGTLsDnjWGZ6zMw1vNWVeE0g_Lwv90Zq5OZJdVFaep1m44HFGzyPPm3TVvi2Vc_=w571-h516-no);
background-repeat: no-repeat;
background-size: 56px;
background-position: left center;
}
.divbig20170822b span{
display: inline-block;
background-color: rgba(128, 128, 4, 0.7);
color: white;
padding:0px 3px;
border-bottom: 3px solid rgba(128, 128, 4, 0.7);
}
.divbig20170822c{
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: bold;
letter-spacing: 0.03em;
line-height: 2;
}
.hra01{
width: 100%;
border: 0px solid red;
height: 5px;
background-color: rgba(128, 128, 4, 0.4);
}
.midtitle20170822a{
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: bold;
letter-spacing: 0.03em;
line-height: 1.4;
color: white;
}
.divexa20170822a{
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: bold;
letter-spacing: 0.03em;
line-height: 2;
border: 1px solid darkorange;
}
#showcom20170823 img {
border-width: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div id="showcom20170823">
<br>
<br>
<br>
<br>
<br>
<div style="text-align: right;" title="是的!這就是範例樣態。"
class="divbig20170822b tps20170822a"><span>tooltips互動
技法之一</span><br>
</div>
<div class="divbig20170822"><span>快速補充說明</span><br>
|tooltipster 互動技法<br>
<div>|馬上對不清楚的地方進行說明</div>
</div>
<hr class="hra01">
<div class="divbig20170822c">tooltipster這一互動模組,可以產生tooltips的互動模態。更重要的是,它
有<span style="text-decoration: underline; color: rgb(255, 153, 0);"
title="這是noir樣式,swing,top" class="tps20170822b">各式各樣的呈現變化</span>,同時<span
style="text-decoration: underline; color: rgb(255, 153, 0);"
data-tooltip-content="#tpspa01" class="tps20170822c">可
以承載多媒體媒材</span>,也可以是超連結互動內容。在
使用上,簡單,可以行使在各種物件上。在調整上,也易於操作。</div>
<br>
<br>
<big><span style="text-decoration: underline;">呈現樣態共有六種模式:</span></big><br>
<img style="width: 570px; height: 73px;"
title="<a href='http://iamceege.github.io/tooltipster/#htmlcontentalt'
target='_blank'>click 到 tooltips網站</a>。shadow,top, slide,向右位移"
class="tps20170822d" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBaxILGdlHvjPX537gjoO1r_QCigcVjzdCO-lq641Zclv0MHMroe-KcJk-AbyR8iCACMjG1FJGO3yLPw1Dpa8AnvyUsnrDNQyijpAzcqFNpsRfR0tnzBXsDaP5FMWWKNVMrcNa2HrAfQ/w863-h111-no/"><br>
<br>
tooltipster的互動效果,可以作用於各式媒材,或編輯元素(elements),例如img、span、div、table、td、
iframe等等。操作方法便利。<br>
<br>
<br>
<br>
<table
style="border-bottom: 1px solid maroon; text-align: left; width: 100%;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: middle; width: 33%; background-color: Maroon; text-align: center;"
class="midtitle20170822a">設置方法<br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<big><span style="text-decoration: underline;">一、請在<head>xxx<
/head>之間(建議)或<body>之後,置入下列 jquery & CSS程式碼:</span></big><br>
<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script><br>
<script type="text/javascript"<br>
src="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/js/tooltipster.bundle.min.js"></script><br>
<link rel="stylesheet" type="text/css"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/tooltipster.bundle.min.css"><br>
<link rel="stylesheet" type="text/css"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css"><br>
<link rel="stylesheet" type="text/css"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css"><br>
<link rel="stylesheet" type="text/css"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css"><br>
<link rel="stylesheet" type="text/css"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css"><br>
<link rel="stylesheet" type="text/css"<br>
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css"><br>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">二、請在<head>xxx<
/head>之間或<body>之後,置入一列驅動程式碼(預設款):</span></big><br>
<br>
<script><br>
$(document).ready(function() {<br>
$('.<span style="color: rgb(204, 0, 0);">tooltipster</span>').tooltipster();<br>
});<br>
</script><br>
<br>
<br>
<big><span style="text-decoration: underline;">三、為編輯元素設置互動,以span為例:</span></big><br>
<span style="text-decoration: underline; font-weight: bold;"></span><br>
<br>
<span style="text-decoration: underline;" title="這是基本預設款式"
class="tooltipster">這是用span包圍起來的文字。</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<big><span style="text-decoration: underline;" <span
style="color: rgb(204, 0, 0);">title="這是基本預設款式"</span> <span
style="color: rgb(204, 0, 0);">class="tooltipster"</span>>這是用span包圍起
來的文字。</span><br>
</big><br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
1. 只要在span裡面,加入有啟動tooltipster功能的 class,此例為tooltipster。再於 title
裡面加入文字;那文字就是會跑出來的文字。<br>
2. 基本款,其呈現位置會視狀況自行調整。<br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/d-gdneipmzg?rel=0" frameborder="0" allowfullscreen></iframe><br>
<br>
<br>
<table
style="border-bottom: 1px solid maroon; text-align: left; width: 100%;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: middle; width: 33%; background-color: Maroon; text-align: center;"
class="midtitle20170822a">設置變化款式<br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
一、同前例,如已設,則省略。<br>
<br>
<big><span style="text-decoration: underline;">二、設置各種款項的驅動程式,<
head>xx<head>之間或<body>之後,此例為筆者設定第一款式:</span></big><br>
<br>
<script><br>
$(document).ready(function() {<br>
$('.<span style="color: rgb(204, 0, 0);">tps20170822a</span>').tooltipster({<br>
side:['left'],
//出現的位置,有 left, right, top, bottom 這四選項。<br>
animation:
'fall',
//出現動作模式,有 'fade','grow','swing','slide','fall' 這五種選項。<br>
theme:
'tooltipster-punk',
//設定的款式,有五種,請看下方說明。<br>
functionPosition: function(instance, helper,
position){ //可設定出現的位移位置。<br>
position.coord.top += 0;<br>
position.coord.left += 0;<br>
<br>
return position;<br>
}<br>
});<br>
});<br>
</script><br>
<br>
<br>
<big><span style="text-decoration: underline;">三、為元素設定互動,以圖片為例:</span></big><br>
<br>
<img style="width: 240px; height: 160px;" title="第一變化款式樣態"
class="tps20170822a" alt=""
src="https://c1.staticflickr.com/3/2942/34049661985_07e951a0de_b.jpg"><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<img style="width: 240px; height: 160px;" title="<span
style="color: rgb(204, 0, 0);">第一變化款式樣態</span>" class="<span
style="color: rgb(204, 0, 0);">tps20170822a</span>" alt=""
src="https://c1.staticflickr.com/3/2942/34049661985_07e951a0de_b.jpg"><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
可設定的款式共有五款,分別為:tooltipster-light, tooltipster-borderless,
tooltipster-punk, tooltipster-noir,
tooltipster-shadow 。<br>
<br>
<br>
<big><span style="text-decoration: underline;">四、其他筆者所設定樣態,第二款式noir:</span></big><br>
<br>
<span style="text-decoration: underline;">請copy驅動程式碼,放到<head>
xxx</head>之間或<body>之後:</span><br>
<br>
<script><br>
$(document).ready(function() {<br>
$('.<span style="color: rgb(204, 0, 0);">tps20170822b</span>').tooltipster({<br>
side:['top'],<br>
animation: 'swing',<br>
theme: 'tooltipster-noir',<br>
functionPosition: function(instance, helper, position){<br>
position.coord.top += 0;<br>
position.coord.left += 0;<br>
<br>
return position;<br>
}<br>
});<br>
});<br>
</script><br>
<br>
<br>
<div title="筆者自設第二款式效果" class="divexa20170822a tps20170822b">這是DIV。請移到這樣
來看tooltipster效果。</div>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<div title="筆者自設第二款式效果" class="divexa20170822a <span
style="color: rgb(204, 0, 0);">tps20170822b</span>">這是DIV。請移到這樣來看
tooltipster效果。</div><br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/52brvGNR0IY?rel=0" frameborder="0" allowfullscreen></iframe>
<br><br>
<br>
<br>
<table
style="border-bottom: 1px solid maroon; text-align: left; width: 100%;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: middle; width: 33%; background-color: Maroon; text-align: center;"
class="midtitle20170822a">可超連結款式<br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<big><span style="text-decoration: underline;"></span></big><br>
<span style="text-decoration: underline;">請copy驅動程式碼,放到<head>
xxx</head>之間或<body>之後:</span><br>
<br>
<script><br>
$(document).ready(function() {<br>
$('.<span style="color: rgb(204, 0, 0);">tps20170822d</span>').tooltipster({<br>
side:['top'],<br>
animation: 'slide',<br>
<span style="color: rgb(255, 153, 0);">interactive:
true,
//這一行,啟動滑鼠可上移到內容並click的功能。</span><br>
<span style="color: rgb(255, 153, 0);">contentAsHTML:
true,
//這二行,啟動title的內文可是超連結文字的功能</span><br>
theme: 'tooltipster-shadow',<br>
functionPosition: function(instance, helper, position){
//此例設定了位移,向左位移90px<br>
position.coord.top += 0;<br>
position.coord.left += <span style="color: rgb(204, 0, 0);">90</span>;<br>
<br>
return position;<br>
}<br>
});<br>
});<br>
</script><br>
<br>
<br>
<table style="text-align: left; width: 100%;"
title="<a href='http://lmcsilver.blogspot.tw/' target='_blank'>可超連結影像blog</a>,同
時位移的樣態。"
class="tps20170822d" border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg"><br>
</td>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/5/4227/34898664156_5eecb5299a_b.jpg"><br>
</td>
<td style="vertical-align: top; text-align: right;"><span
style="text-decoration: underline; font-weight: bold;">這是表格。</span><br>
也可設定在格子TD。<br>
<br>
夏日。<br>
陽明山。<br>
綠色。<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;"> 語法:</span><br>
<table style="text-align: left; width: 100%;"<br>
<span style="color: red;">title</span>="&lt;a
href='http://lmcsilver.blogspot.tw/'
target='_blank'&gt;可超連結影像blog&lt;/a&gt;,同<br>
時位移的樣態。"<br>
class="<span style="color: rgb(204, 0, 0);">tps20170822d</span>"
border="0" cellpadding="0" cellspacing="3"><br>
<tbody><br>
<tr><br>
<td style="vertical-align: top; width: 33%;"><img<br>
style="width: 187px; height: 125px;" alt=""<br>
src="https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg"><br><br>
</td><br>
<td style="vertical-align: top; width: 33%;"><img<br>
style="width: 187px; height: 125px;" alt=""<br>
src="https://c1.staticflickr.com/5/4227/34898664156_5eecb5299a_b.jpg"><br><br>
</td><br>
<td style="vertical-align: top; text-align:
right;">這是表格。<br><br>
<br><br>
夏日。<br><br>
陽明山。<br><br>
<br><br>
綠色。<br><br>
<br><br>
</td><br>
</tr><br>
</tbody><br>
</table><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
有超連結的內容設定較為複雜一點點,還請看下面的影音教學。<br>
<br>
<br>
影音說明範例,將 " 符號都改為 ' 這符號:<br>
<big><a href=' http://lmcsilver.blogspot.tw/ '
target='_blank'>可超連結影像blog</a>,同<br>
時位移的樣態。</big><br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HO1bFUE-aPI?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br><br>
<table
style="border-bottom: 1px solid maroon; text-align: left; width: 100%;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: middle; width: 33%; background-color: Maroon; text-align: center;"
class="midtitle20170822a">圖文整合款式<br>
</td>
<td style="vertical-align: top;"> ★注意:使用data-tooltip-content
取代上面的 title<br>
</td>
</tr>
</tbody>
</table>
<br>
設置思路:<br>
<ol style="padding: 0px;">
<li>請設置一個小型DIV,把圖文以及影音,都放在DIV內。最後tooltip出現的就是這個DIV。</li>
<li>在這DIV的前後加上有id的span,<span
id="idname">XXX</span>。因為這個模組是如此要求的。</li>
<li>置入驅動程式碼。</li>
<li>在設定的互動的媒材,這次要用data-tooltip-content="#idname",而不是上面所用的 title="xxx"。</li>
<li>最後,使用display:none; 使得先寫好的DIV,消失於版面上。</li>
</ol>
<br>
<span style="font-weight: bold; text-decoration: underline;">一、小型DIV,加上
span,給span設立 id ,範例。DIV裡面可以加入任何元素以及互動、超連結。</span><br>
<br>
<div style="width: 258px;"><a
href="http://lmcsilver.blogspot.tw/2016/09/201609.html"><img
style="border: 0px solid ; width: 92px; height: 61px;" alt=""
src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg"
align="left"></a> <span style="font-weight: bold;">師大夜市</span><br>
總是人潮如海,<br>
讓人懷念的小吃,很多。<br>
</div>
<br>
語法:<br>
<span style="color: red;"><span id="<span
style="color: rgb(51, 204, 0);">tpcontenta01</span>"></span><br>
<div style="width: 258px;"><img style="width: 92px; height:
61px;" alt=""
src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg"
align="left">&nbsp; <span style="font-weight:
bold;">師大夜市</span><br>&nbsp;
總是人潮如海,<br>&nbsp; 讓人懷念的小吃,很多。<br></div><br>
<span style="color: red;"></span></span><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">二、設置驅動程式碼,
<head>xxx</head>之間或<body>之後:</span><br>
<br>
<script><br>
$(document).ready(function() {<br>
$('.<span style="color: red;">tps20170822e</span>').tooltipster({<br>
side:['top'],<br>
animation: 'fall',<br>
theme: 'tooltipster-light',<br>
<span style="color: rgb(255, 153, 0);">interactive:
true,
//這一行,啟動滑鼠可上移到內容並click的功能。</span><br>
functionPosition: function(instance, helper, position){ <span
style="color: rgb(255, 153, 0);">//設定向右偏移了90px</span><br>
position.coord.top += 0;<br>
position.coord.left += <span style="color: rgb(255, 153, 0);">90</span>;<br>
<br>
return position;<br>
}<br>
});<br>
});<br>
</script><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">三、為媒材設立互動機
制,注意,使用 data-tooltip-content ,而不是 title :</span><br>
<br>
<br>
<big>晚上,</big><span
style="text-decoration: underline; font-weight: bold; font-style: italic;"
data-tooltip-content="#tpcontenta01" class="tps20170822e">散步的師大夜市</span><big>,
一樣的味道,不一樣的嘈吵。</big><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">語法:</span><br>
<br>
<span style="text-decoration: underline; font-weight: bold;
font-style: italic;" <span style="color: red;">data-tooltip-content="<span
style="color: rgb(51, 102, 255);">#</span><span
style="color: rgb(51, 204, 0);">tpcontenta01</span>"</span> class="<span
style="color: red;">tps20170822e</span>">散步的師大夜市</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">注意技巧:</span><br>
data-tooltip-content="#xxx" ,那個「 <span
style="color: rgb(51, 102, 255);">#</span> 」字符號,即id的符號,一定要加進去。<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">四、把第一步聚所設置的
小DIV,在版面上藏起來。</span><br>
<br>
在小DIV(包含span)外層再加上一個DIV,然後設立 style="display: non;" 使得加上的外層DIV在版面上消失。例如:<br>
<br>
<span style="color: rgb(204, 0, 0);"><div style="display: none;"></span><br>
<span id="tpcontenta01"><br>
<div style="width: 258px;"><br>
內容<br>
</div><br>
</span><br>
<span style="color: rgb(204, 0, 0);"></div></span><br>
<br>
<br>
如果圖文整合款式,有做了很多個,都可以把所做的小DIV,一起藏在這個要消失的DIV裡面。<br>
<br>
<br>
<br>
<table
style="border-bottom: 1px solid maroon; text-align: left; width: 100%;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: middle; width: 33%; background-color: Maroon; text-align: center;"
class="midtitle20170822a">使用click方式<br>
</td>
<td style="vertical-align: top;"> ★你可以使用click來取代hover,例如純影音的內
容時<br>
</td>
</tr>
</tbody>
</table>
<br>
<span style="text-decoration: underline; font-weight: bold;">構思方式:</span><br>
<ol>
<li>設置方式和上例,圖文整合款示,相同。設立一個小DIV,再外加上有id 的span 。<br>
</li>
<li>驅動程式碼的內容設定,有一個增加功能,啟動Click,請看範例。</li>
<li>使用click,而不是如之前的hover,來啟動tooltips。</li>
</ol>
<br>
一、驅動程式碼:<br>
<br>
<script><br>
$(document).ready(function() {<br>
$('.tps20170822f').tooltipster({<br>
side:['right'],<br>
animation: 'swing',<br>
theme: 'tooltipster-noir',<br>
<span style="color: rgb(255, 153, 0);">interactive:
true,
//這一行,啟動滑鼠可上移到內容並click的功能。</span><br>
<span style="color: rgb(255, 153, 0);">trigger:
'click',
//這一行,將以click來啟動功能。</span><br>
functionPosition: function(instance, helper, position){ <br>
position.coord.top += 0;<br>
position.coord.left += 0;<br>
<br>
return position;<br>
}<br>
});<br>
});<br>
</script><br>
<br>
<br>
二、範例,請按圖片(這次是click,不是hover):<br>
<br>
<br>
<img style="width: 180px; height: 120px;"
data-tooltip-content="#show02a" class="tps20170822f" alt=""
src="https://farm1.staticflickr.com/717/31964606043_17ca856b39_o.jpg"
align="left"> 臉色!<br>
諸佛也有臉色嗎?<br>
<br>
俯看世間的眼,<br>
是一種深沈的人性。<br>
← click image !!<br clear="all">
<br>
<br>
語法:<br>
<br>
<img style="width: 180px; height: 120px;" <span
style="color: rgb(204, 0, 0);">data-tooltip-content="#show02a"
class="tps20170822f"</span> alt=""
src="https://farm1.staticflickr.com/717/31964606043_17ca856b39_o.jpg"
align="left"><br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xwWmpkPH6w8?rel=0" frameborder="0" allowfullscreen></iframe>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="display: none;">
<br>
<span id="tpspa01">
<div style="width: 228px;"><img style="width: 82px; height: 60px;"
alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgnVx4BlXj4pXzojJC3vVovvmJS2lS5gKZuw8s3Thf3eV0IHJD-I0wSxM40bJnIMhXFtG2WHbLMn83gsRuW2MRFBFMx0ceOTgStoM3WvoHycmz_w3hHjFhg1yI64g-O3W2QC0Hr__pyY/w327-h238-no/"
align="left"><span
style="text-decoration: underline; font-weight: bold;">海豚的跳躍。</span><br>
使用light模式,grow,<br>
在右邊呈現。圖加文。<br>
</div>
</span>
<br>
<br>
<br>
<span id="tpcontenta01">
<div style="width: 258px;"><a
href="http://lmcsilver.blogspot.tw/2016/09/201609.html"><img
style="border: 0px solid ; width: 92px; height: 61px;" alt=""
src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg"
align="left"></a> <span style="font-weight: bold;">師大夜市</span><br>
總是人潮如海,<br>
讓人懷念的小吃,很多。<br>
</div>
</span><br>
<span id="show02a">
<div style="width: 320px; height: 180px;"><iframe
src="https://www.youtube.com/embed/uztDdU4JoJg?rel=0"
allowfullscreen="" frameborder="0" height="180" width="320"></iframe></div>
</span><br>
</div>
<br>
</div>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-37189562021849706592017-07-22T10:50:00.001+08:002017-12-13T17:52:29.614+08:00自由移動 DIV:relative, absolute, translate, z-index。完全理解!<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( '#olli20170721' ).find('li').click(function() {
$(this).siblings().removeClass('chandiv').end().addClass('chandiv');
});
});
</script>
<style>
.forimage img {
padding: 0px;
margin: 0px;
border: 0px solid red;
}
#olli20170721 {
}
#hm20170721 {
animation: myanim20170721 5s 2s 3;
}
@-webkit-keyframes myanim20170721 {
0% {padding-left: 0em;}
100% {padding-left: 7em;}
}
.divposi {
width: 150px;
height: 150px;
border: 1px solid black;
position: relative; /* 啟動功能 */
top: 0px; /* 向上移動 */
left: 0px; /* 向左移動 */
transition: 0.5s;
}
.posirela {
/* 啟動功能 */
top: -25px; /* 向上移動 */
left: 100px; /* 向左移動 */
}
.tdmainword20170721 {
font-family: Verdana, '微軟正黑體';
font-size: 1.09em;
font-weight: bold;
line-height: 1.8;
}
.tdmainword2017072102 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: bold;
line-height: 1.9;
letter-spacing: 0.1em;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZtAAB0sHSEjB-F6VOhINA9UpKZ4x1VBrqaewXMC17M823N2gFOIJkfw3HVzhYCwN22xtQ2rj8yWgmFt-Ye6E-D3GipETjq2HslfIiEXzHs4fYDOG3id44OHmYQSk5BmBs5l7Us93Mjs4/w638-h850-no/);
background-repeat: no-repeat;
background-size: 420px;
background-position: top -60px left -260px;
padding-left: 33%;
}
.absomov20170721a {
position: absolute;
}
.absomov20170721 {
position: absolute;
top: -20px;
left: 150px;
}
.fatherdiv {
position: relative;
}
.transmov {
transform: translate(100px, -50px);
transition: 0.5s;
}
.transmov02 {
transform: translateX(100px);
transition: 0.5s;
}
.transmov03 {
transform: translateY(-50px);
transition: 0.5s;
}
.backimg20170721 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIQ2bomiKtVQju9qrzhlAxFbzT3ll8W_s-m7507COeOl7lPmszESwd_7VhatKDlNPp4l_VJm6jP7YISVpBC-fBg9aRWSLEB4i85OYK5Iz9jsTmSCJY0PpQKUWktqO9EbG3ZXq2b8g-oWk/s200-no/);
background-repeat: no-repeat;
background-size: 62px;
background-position: top -10px left -10px;
}
.backimg2017072102 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIQ2bomiKtVQju9qrzhlAxFbzT3ll8W_s-m7507COeOl7lPmszESwd_7VhatKDlNPp4l_VJm6jP7YISVpBC-fBg9aRWSLEB4i85OYK5Iz9jsTmSCJY0PpQKUWktqO9EbG3ZXq2b8g-oWk/s200-no/);
background-repeat: no-repeat;
background-size: 42px;
background-position: bottom -5px right 3px;
transform: rotate(180deg);
}
.tdbigword20170721 {
font-family: Verdana, '微軟正黑體';
font-size: 5.39em;
font-weight: bold;
line-height: 1;
border: 2px solid darkorange;
}
.tdmidword20170721 {
font-family: Verdana, '微軟正黑體';
font-size: 2.19em;
font-weight: bold;
line-height: 1.2;
}
/* ol的設定 */
.olliconsli20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}
/* li的設定 */
.olliconsli20170718 >li {
display: inline-block;
margin-right: 0.5em;
padding: 0px 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: 0.4s;
}
/* ol互動的設定 */
.olliconsli20170718 >li:hover {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}
/* 按下li之後的互動變化 */
.chandiv {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
transform: rotate(-3deg);
}
.posz20170721a {
position: relative;
z-index: 3;
background-color: yellow;
}
.posz20170721b {
position: relative;
z-index: 2;
background-color: darkred;
margin-left: 3em;
text-align: right;
}
.divzindex {
position: relative;
z-index: -1;
}
.spanword20170725c {
font-family: Verdana, '微軟正黑體';
font-size: 1.09em;
font-weight: bold;
line-height: 1.2;
background-color: rgba(152, 152, 152, 0.3);
border-bottom: 1px solid black;
border-right: 1px solid black;
cursor: pointer;
}
</style>
<style>
/*移動位置的一組語法*/
.posichange20171213 {
position: relative;
top: 0em; /*這是指以物件的左上角為原點來計算,正負值均可*/
left: 0em;
transition: 1s linear;
}
.posichange20171213add {
top: -4em; /*這是指以物件的左上角為原點來計算,正負值均可*/
left: 10em;
}
.divword20171213a01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: 900;
line-height: 1.9;
letter-spacing: 0.1em;
padding-left: 4em;
background: rgba(152, 152, 152, 0.3) url(https://lh3.googleusercontent.com/3rFPtb-Njrqu827booeW69nNShKXol0ErApz3WlgLq5xsldbdNATcdyGDvbUu8cqVtlMOmggKkC_PwAKTsS_lTSQYWOlj5e0nVwZmm5FcD_WdZOiAztkDTp0xsn5QC3rhTZUM5OiVVyM9AoFDXdpcZSizJtFbG_4nvILjk_ePu0FXHE-d0yGvbSR7yAuKJyXorvpD8_0jEJjkJ1BhUsRXrF0Zf2eBSDgPmfkvZqwd7Oe6u7vskg9a2H68nvFMGtZqQOt-JSnc7IAUJFWtneSI0fwBUSGBp1uEQsHF_EEgozYPJefVqvel51Iv2UcIpqCatmJiKj5VtsA2Pa4L5haL9h1Rs-fx-EGzcEO6gizHko-mz6rsec47p9e0LjdSUxsd7Sd4KQfjI9LibNVXYSKnam45jPoYVcHClnHPz3M8YJo5d8bTvra2YQSnRxnOLZJ_4K-Un6C3-0Sf8Ju5fNXjQfCAiUJyHXgodl_z5Jv1KNeVYwlbwGXC2Ht3HV1TX_zDIpjDia1qHonT89MfIs9NkSZ3AVo1tP2miT2cxwYGZS7-8EbXy8KqQGkhd2hEUQteHNyKyiHee8lbUXCMEK90L0W6B0mt9-e9KToyhpORHqk1PFMGdrpFAJYByw9tPn9aWEzEwMpzXyvPIKsjce0gYmyaZmK4G8rN8aq=s200-no) no-repeat left 5px center/ contain;
}
.mocalsna {
margin-top: 0em;
transition: 1s linear;
}
.mocalsnadd {
margin-top: -2em;
border: 1px solid red;
}
</style>
<br>
<br>
<br>
<br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: bottom;" class="tdmidword20170721"><br>
<span style="color: rgb(255, 102, 0);" id="hm20170721">自由移動!</span><br>
<div
style="border-top: 1px solid black; border-bottom: 1px solid black;">block-level
elements ;區塊層級物件</div>
</td>
<td
style="vertical-align: bottom; width: 36%; text-align: center;"
class="tdbigword20170721"><br>
DIV<br>
</td>
</tr>
</tbody>
</table>
<div style="text-align: right;"><small>by 編輯老師<br>
</small></div>
<br>
<div class="tdmainword2017072102">
數位文本的意義給出方式,更大的依賴於媒材之間的空間位置關係,所釋放出來的理解過程。換言之,寫作過程中,媒材位置的排列佈置,往往是作者傳達寫作思維
意義的方
式。<br>
就此,對於如何自由的去移動媒材,控制媒材所處的位置,就是必要的數位文本寫作技法。<br>
</div>
<br>
<br>
<br>
<ol id="olli20170721" class="olliconsli20170718">
<li onclick="document.location='#an20170722a';">relative:相對法</li>
<li onclick="document.location='#an20170722b';">absolute:絕對法</li>
<li onclick="document.location='#an20170722c';">translate:轉移法</li>
<li onclick="document.location='#an20170722d';">上下重疊</li>
</ol>
<br>
<span class="spanword20170725c" onclick="$(this).next().next().toggle(800);">影音教學:</span><br>
<div style="display: none;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GlEbfpVmVEg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<br>
<br>
<br>
<br>
<br>
<a name="an20170722a"></a><br>
<br>
<table style="text-align: left; width: 100%; border-collapse: collapse;"
class="forimage" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
<big><span style="text-decoration: underline; font-weight: bold;">技
法一:
position: relative;</span></big><br>
<br>
<span style="font-weight: bold;">一個典型的 position: relative; CSS語法。</span><br>
<br>
<style><br>
/* relative語法 */<br>
.posirela {<br>
position: relative; /* 啟動功能 */<br>
top:
-25px;
/* 向上移動 */<br>
left:
100px; /*
向左
移動 */<br>
}<br>
<br>
/* div寬高設定 */<br>
.divposi {<br>
width: 150px;<br>
height: 150px;<br>
border: 1px solid black;<br>
}<br>
<br>
</style><br>
<br>
<span style="font-weight: bold;">下列是一個DIV 的html語法:</span><br>
<br>
<div class="divposi"><br>
這是示範的DIV<br>
<br>
</div><br>
<br>
<span style="font-weight: bold;">DIV 的呈現樣態如下。 </span><br
style="font-weight: bold;">
<span
style="border-right: 1px solid black; text-decoration: underline; font-weight: bold; background-color: lightgray;"
onclick="$('.divposi').toggleClass('posirela');">按這裡會把
.posirela 加入,產生變化。</span><br>
<br>
<br>
<br>
<div class="divposi">這是示範的DIV </div>
DIV後面的編輯寫作文字。DIV後面的文章…<br>
<br>
</td>
<td style="vertical-align: bottom; width: 50%;"
class="tdmainword20170721">幾個觀察的重點:<br>
<br>
一、DIV移動後,「電腦」仍然認為DIV真正的所在的位置是不變的。所以整個版面沒有變動。移動只是視覺上的移動,真正的位置仍是沒有變動的。<br>
<br>
二、DIV是以<span style="color: red;">本身所在位置</span>為計算原點,來進行移動位置的計
算,所以被稱之為相對的移動,relative。以DIV本身的top, right, bottom, left來計算。<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<a name="an20170722b"></a><br>
<br>
<table style="text-align: left; width: 100%; border-collapse: collapse;"
class="forimage" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><br>
<big><span style="text-decoration: underline; font-weight: bold;">技
法二:position: absolute;</span></big><br>
<br>
<span style="font-weight: bold;">請先看範例,觀察變化。</span><br
style="font-weight: bold;">
<span
onclick="$('.abso20170721').toggleClass('absomov20170721a', 1).toggleClass('absomov20170721', 1000);"
style="border-right: 1px solid black; text-decoration: underline; font-weight: bold; background-color: lightgray;">按
這裡來移動DIV。</span><br>
<br>
<div
style="width: 55px; height: 32px; position: relative; top: 5px; left: -49px;"
class="backimg2017072102"><br>
</div>
<div style="border: 1px solid black; height: 204px;"
id="exab20170721" class="fatherdiv">這是父
級DIV。<br>
這是內文的文字。<br>
這是內文的文字。<br>
<div style="border: 1px solid red; width: 233px;"
class="abso20170721">這是要進行 absolute 移動的DIV<br>
<br>
<br>
<br>
</div>
這是子DIV後的文字。<br>
這是子DIV後的文字。<br>
<br>
<br>
</div>
<br>
<span style="font-weight: bold;">現在來看CSS語法:</span><br>
<br>
<style><br>
<br>
/* 父級的DIV。一定要設定為relative */<br>
.fatherdiv {<br>
position: relative;<br>
}<br>
<br>
/* 要以absolute移動的DIV */<br>
.absoludiv {<br>
position: absolute;<br>
top: -20px;<br>
left: 150px;<br>
}<br>
<br>
</style><br>
<br>
<br>
<br>
<br>
</td>
<td style="vertical-align: top;" class="tdmainword20170721"><br>
<br>
觀察注意事項:<br>
<br>
一、absolute移動DIV後,不但是在視覺上移動了,電腦同時也把原來在版面上所佔的位置取消了。所以會看到,下面的文字擠上來了。<br>
<br>
二、absolute移動功能,是<span style="color: red;">雙重結構的</span>。要先有父級的DIV,然後裡面再設置
absolute要移動的DIV。如果沒有設置父級DIV,就會以「整
個網頁」當作父級DIV。所以會跑到最上面 <span
onclick="$('#exab20170721').toggleClass('fatherdiv');"
style="text-decoration: underline; background-color: lightgray;">click看
效果</span>。<br>
<br>
三、移動計算的原點是以「父級DIV」的左上角為計算的原點(箭頭處)。<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<a name="an20170722c"></a><br>
<br>
<table style="text-align: left; width: 100%; border-collapse: collapse;"
class="forimage" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><br>
<big><span style="text-decoration: underline; font-weight: bold;">技
法三:transform: translate(x, y);</span></big><br>
<br>
<span style="font-weight: bold;">這是CSS較新的語法,可以x,
y軸的移動,也可以單獨是x軸或y軸,來移動。</span><br>
<br>
transform: translate(100px, -50px); <span
onclick="$('#tral20170721').removeClass('transmov02 transmov03').toggleClass('transmov');"
style="text-decoration: underline;">按此看效果</span><br>
transform: translateX(100px); <span
onclick="$('#tral20170721').removeClass('transmov transmov03').toggleClass('transmov02');"
style="text-decoration: underline;">按此看效果</span><br>
transform: translateY(-50px); <span
onclick="$('#tral20170721').removeClass('transmov02 transmov').toggleClass('transmov03');"
style="text-decoration: underline;">按此看效果</span><br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="width: 52px; height: 24px;"><img
style="width: 265px; height: 246px; position: relative; top: -110px; left: -120px; z-index: -1;"
alt=""
src="https://lh3.googleusercontent.com/UMFER9iN3ov7tvE26gtUDecMDMqnF_kgEJWKyZFxSWGI1JMR3N00mdORJ4wxEM4bg_yH7UPAGDBti7OZmK2PRXC8qFN181pvyunn3pMTgSVpWM-WOfq6jX1JJNQat179n3-CnQy-iPLDcbcwHYtuNlJVuNTEfgcOqx5Ns2SNejH-5QKSV9P8Zo-z897idQVHty8i8qDF3tczzBP5ApZElPG4PK7rPWozlcAtPS_g9rsxzVvn8kJvcfV589FkVgyddY9-N8PZrrk6NrdIfF2hygBCnUvg-BUn5NglwX5oagQzdpsvqed-fhH8buWERnWqUEO5fCQan5Nk6NHING5laF-A-wNxTUwRIkqjOrlWt6Tx2_dEsq5KD00dt7auK-AGuFt82pJ74a3nQRujFa598jMFaZiUvYkGZbF53bFnourVVdSsfBeDQk3EkefBbiYAT_bH10I0sZZAL0RGPnZjn6SY6cu8uaDk6x2ZkaClaUvPYFR5Ex_yxvzuVuUZbML38QWk9Ki_t-UZuVr56GG0cXZl4-B8KEwCZ8DUGcIb_UVbY4thnooMVV9bN0rO4DzWxlsLAf1a0-kzQJOa48z73bRN6Iy-NlWASlk_dfIrqcRC8C732Tm6cUTrag=w265-h246-no"><br>
</div>
<div class="backimg20170721">
<div id="tral20170721" style="border: 1px solid blue;">CSS語法:<br>
<br>
<style><br>
.transmov {<br>
transform: translate(100px, -50px);<br>
}<br>
</style><br>
</div>
DIV後面的文字。後面的文字。<br>
</div>
<br>
<br>
<br>
</td>
<td style="vertical-align: top;" class="tdmainword20170721"><br>
<br>
<br>
<br>
觀察注意事項:<br>
<br>
一、translate 相當於 relative,是以本身的左上角為移動的參考點。<br>
<br>
二、同樣的,被移動只是視覺上的效果,物件本身所佔的版面位置並沒有變化。所以,移動時,下方的資料並沒有任可變化。<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<a name="an20170722d"></a><br>
<br>
<table style="text-align: left; width: 100%; border-collapse: collapse;"
class="forimage" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><br>
技法四:上下重疊的變化<br>
<br>
當二個(或以上)DIV彼此重疊時,要如何來決定那個在最上面,那個在最下面呢?彼此重疊的順序,要如何來決定呢?<br>
<br>
如使用z-index後下例的變化。<br>
<br>
<div style="width: 179px; height: 97px;" class="posz20170721a">A<br>
</div>
<br>
<div
style="width: 214px; height: 122px; margin-top: -5em; color: white;"
class="posz20170721b">B<br>
</div>
<br>
CSS語法:<br>
<br>
.divA {<br>
<br>
position: relative;<br>
z-index: 3;<br>
}<br>
<br>
.divB {<br>
position: relative;<br>
z-index: 2;<br>
}<br>
<br>
說明:<br>
要重疊的DIV排序,都要有二道手序。<br>
(一)是都要有 position 這個指令,才能相互比較。<br>
(二)再使用z-index: 數字;來形成重疊順序。數字愈大,會在上面。<br>
(三)position 的參數值可以是不同的,諸如
static、absolute、relative、fixed。例如一個是relative,而另一個是absolute,也是可以進行比較。<br>
<br>
<br>
<br>
<br>
<br>
</td>
<td style="vertical-align: top;" class="tdmainword20170721"><br>
<br>
觀察說明:<br>
<br>
一、一般而言,在預設的狀況下,應是會面的編輯元件會壓住前面的。<br>
<br>
<div style="width: 179px; height: 97px; background-color: yellow;">A<br>
</div>
<br>
<div
style="width: 214px; height: 122px; margin-top: -5em; background-color: darkred; color: white;">B<br>
</div>
<br>
二、如果有幾個編輯元素要來排定重疊順序,我們就可以來使用 position & z-index 的共同使用功能。<br>
<br>
三、一般的預設中,其實每個文件中的元件都是被預計為 z-index: 0;
。因此,如果只是單純的要把某一單獨元件拉到最下面,那麼只要同時為某一元件設定: position: relative; z-index:
-1; ,就可以快速的拉到最下面。<br>
<br>
例如,將照片上移(margin-top: -4em;),後壓前的原理,照片會蓋住文字。於是使用 z-index: -1;
這個技法,照片就會被拉到最後面,文字跑出來了:<br>
<br>
.divzindex {<br>
position: relative;<br>
z-index: -1;<br>
}<br>
<br>
<span
style="border-right: 1px solid black; text-decoration: underline; background-color: lightgray;"
onclick="$('#zindex20170722').toggleClass('divzindex', 200);">請按此看
z-index: -1 效果</span><br>
<br>
<div style="margin-bottom: -7em;">這是一段文字。這是一段文字。<br>
這是一段文字。這是一段文字。這是一段文字。<br>
這是一段文字。</div>
<br>
<div id="zindex20170722"
style="border: 1px solid black; width: 136px;"><img
style="width: 136px; height: 91px;" alt=""
src="https://c1.staticflickr.com/5/4245/34824768352_c192ed5e5e_b.jpg">這
是DIV文字。<br>
</div>
<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
有關疊層次序的原則:
<br>
<img src="https://lh3.googleusercontent.com/DtTGbY6mJe6pQT6xS1pDh4lgc5fTnIhu59kkR5sl9svZ8CCYS_QV65gWGl0rcPOEfxVlWSu9zqAUI5DiIplUtDMJ5hJBhHDKeujE6_YwnGUfclceFRLd7n6jIubrK1toaTCNQ2C42CqGTj2QDvgec967EcAkhYyHwMnlK853IIN_9LVmzCCRJk_YBwW_cIBiBU5K9OibECLzVzS9VSnR1pg0lGuJUO16rz0MijCIfw5C7KE3wvmASyD3l8wj4e11FBOMTCZC46CAzZIQpKflAdWur2TDsW5CxyVy9q66FNPIClioqIhQBvrUie9tMcSy1CZ6YW-zVoQFK_twbm_XfT5ILlD1VOCcwNILSd2nYOSxoXxje6jJfr2FpqPoXV5DBhflLIAKdZaHF6z39TyslAoVIrAUjceBI3FObXEiAPVTT3HABq28BWr4CHlSY6bFaoSbXakx7tC43K9IxOVablj5D7Oa7_gYEfK9lJYZ1K0AuayJc2aRr5vjM71xi3p8ca-kaV1p7yr3JZegLvAi7u8s7vONYxLn_WTDFkMy4k6GQenE36JNmSWa2O3AH0JNk-64bE1eGK4ip2TO4-Lff4lIfU9hC6G0KKXPAv9CAz3K_Sj9R2Hhbxfpav3kTI5p_SceVXiNp9DxeEZ6fUqf5mTmVvb2yVn_pZb-=w600-h360-no" style="width: 570px; border-width:0px padding: 0px;">
<br>
<br>
<br>
<div class="divword20171213a01">移動物件寫作技法比較:margin-top: -15px; 和
postition: relative; top: 5px;
left:
5px; 的不同</div>
<br>
我們以前學過,要讓在版面下方的編輯物件上移,可以使用 margin-top: -15px <span
style="color: black;">這個技法</span>。也就是使用負數的上邊界功能,讓<span
style="color: red;">下方版面整個上移</span>,達到編輯目的。<big
style="font-style: italic; cursor: pointer;"><span
onclick="$('.mocalsna').toggleClass('mocalsnadd');"
style="text-decoration: underline;">按
此看效果。</span></big><br>
<br>
<div class="mocalsna">現在,也可以使用 postition: relative; top: 5px; left:
5px; 這一組CSS語法,來自由移動編輯物件。</div>
<div>兩者看起來效果差不多,但電腦對這者的「認知」是完全不同的。</div>
<br>
margin-top: -15px; 是讓「版面往上移」,而 postition: relative; top: 5px;
left: 5px; 這一組,只是「編輯物件移動」,就電腦而言,版面是沒有變動的。<br>
<br>
所以,如果你只是想「移動編輯物件」,但又不想破壞原本就設計好的版面,就應要使用 postition: relative; top: 5px;
left: 5px; <span
style="text-decoration: underline; color: rgb(204, 0, 0);"
class="posichange20171213">這一組CSS語法,才是正
解</span>。<br>
<br>
<span
onclick="$('.posichange20171213').toggleClass('posichange20171213add');"
style="padding: 3px; text-decoration: underline; background-color: lightgray; cursor: pointer;">請
按此看效果。</span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">CSS語法:</span><br>
<br>
<style><br>
/*移動位置的一組語法*/<br>
.posichange20171213 {<br>
position: relative;<br>
top: -3em;
/*這是指以物件的左上角為原點來計算,正負值均可*/<br>
left: 10em;
/*em 是指以字母的距離來計算*/<br>
}<br>
</style><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">使用Kompozer的
CSS編輯器,操作如圖:</span><br>
<br>
<img style="width: 465px; height: 452px;" alt=""
src="https://lh3.googleusercontent.com/6ndnbUDi5ABFPf4wOAmKgbubB44TTUyOqxTmM3s3ibZTR9fXxL2snWAgvs-etI4Yeu2zP2TrmDN-9ZnGPUgwyqO2bZAZ3lOk4NTZ_iSygRPuO4QmxtSduY7kO95o-yZ6o8_spYC-_y22owBEdBfsWkE_q1LNiSfFA9hhPJW9JlbiULwwswEFD0liRy4NYHHdIUmeRKCai6xOUZK2bUSeFNDrbtSKmhkbnMTuLolYTaNqtRNb_lzvujQMRc-uqWlJ5svoyUafobaxrTR2Pdm-20IADGCFEh8E9LCr53oLOW1nEGhVczCwu2NcEha-lnZFRQWDgG4YkFJYmN4WNWxlGBrSPZu0dm9q0dJ0Bup3fetl8VBtWgNwAL7U8zFD2fT5M3m-pb3trSnIr8ByqaKPhXOhvFV8KQNgf8aF4JRo8XJ1h9YcU18tz1MfMyiM9T0lVcfAZiplRg-nGyDmPCHIcd0x5ViwWRgXqHmuDIaUVELEZ-qZda1iF19xOiultAlY0RXYDj8VHCJWYE-Qo-rhnxCq9zcq4ez8mwAhdbbzMnzHRN23Zb1ZlwC-SYidkYDV4peffCOn_7ekkO7DM7vhs-eYbGbAG3rmG6Cu4V3FpOksusIKSZZC7KFPCtavSHVcgUm84L0N_IAfX072FrROrd0VUWcrM9cXx29l=w465-h452-no"><br>
<br>
【說明】:<br>
<ol style="padding-left: 20px;">
<li>「位置」的地方,請設定「相對位置」,這即是 position: relative;</li>
<li>「位 移」的地方,請在「頂端」及「左邊」設定參數值。這即是 top: -10px; left: -20px;</li>
</ol>
<br><br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-60299460327343092092017-07-20T15:04:00.003+08:002017-11-05T11:18:10.424+08:00完全DIY 快速自製 image gallery <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
(function( $ ){
var numberca20170720 = 1;
$.fn.myPlugin20170720 = function() {
// 你的Plugin內容寫在這裡面。
var numgapic = $(this).find('>img').size();
var realnum = numgapic - numberca20170720;
if (realnum != 0) {
$(this).find('>img').eq(realnum).hide('slide', {direction: 'left'}, 600);
numberca20170720 = numberca20170720 + 1;
}
else {
$(this).find('>img').show('slide', {direction: 'right'}, 600);
numberca20170720 = 1;
}
};
})(jQuery);
</script>
<script>
function idopicgslider02() {
$(this).find('>img').eq(2).hide('slide', {direction: 'right'}, 600);
};
</script>
<style>
.idoitimgga20170719 {
position: relative;
border: 1px solid black;
}
.idoitimgga20170719 >img {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border: 0px solid red;
}
.mainbigw20170720 {
font-family: Verdana, '微軟正黑體';
font-size: 4.17em;
font-weight: bold;
line-height: 1.05;
-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: red;
}
.table20170720 td:nth-of-type(1) {
background-color: lightgreen;
color: white;
font-family: Verdana, '微軟正黑體';
font-size: 2.17em;
font-weight: bold;
line-height: 1.1;
}
.table20170720 td:nth-of-type(2) {
font-family: Verdana, '微軟正黑體';
font-size: 3.47em;
font-weight: bold;
line-height: 1.1;
}
</style>
<br>
<br>
<br>
<br>
<br>
<table style="text-align: left; width: 100%;" class="table20170720"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%;">網頁程式寫作<br>
</td>
<td style="vertical-align: bottom;"><span
style="border: 1px solid lightgreen; font-style: italic;">完全DIY</span>
</td>
</tr>
</tbody>
</table>
<div class="mainbigw20170720">快速隨意的自製出 <span style="color: lightgreen;">image
gallery</span></div>
<br>
<br>
<br>
Schneider 老鏡,是我最喜的老鏡頭! <br>
<span style="font-weight: bold;">柔和、與世無爭、甜淡、純顏色的一種姿態呈現。</span><br>
Canon 5D + schneider 50mm f2.8 M42 。click more…▼<br>
<div style="width: 576px; height: 384px;"
onclick="$(this).myPlugin20170720();" class="idoitimgga20170719"><img
style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4309/35183964774_76cfb39f64_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4304/35981836736_be0d486a4a_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4323/35183956484_58fc3cd977_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4208/35836631096_60e8ee7fea_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4279/35067718253_93b04e03d6_o.jpg"><br>
</div>
<br>
123 456 789 101112 範例後的文字<br>
<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">寫作語法範例:</span></big><br>
<br>
<div style="width: 576px; height: 384px;"<br>
<span style="color: red;">onclick="$(this).myPlugin20170720();"</span> <span
style="color: red;">class="idoitimgga20170719"</span>><br>
<img<br>
style="width: 576px; height: 384px;" alt=""<br>
src="https://farm5.staticflickr.com/4309/35183964774_76cfb39f64_o.jpg"><br><br>
<img style="width: 576px; height: 384px;" alt=""<br>
src="https://farm5.staticflickr.com/4304/35981836736_be0d486a4a_o.jpg"><br><br>
<img style="width: 576px; height: 384px;" alt=""<br>
src="https://farm5.staticflickr.com/4323/35183956484_58fc3cd977_o.jpg"><br><br>
<img style="width: 576px; height: 384px;" alt=""<br>
src="https://farm5.staticflickr.com/4208/35836631096_60e8ee7fea_o.jpg"><br><br>
<img style="width: 576px; height: 384px;" alt=""<br>
src="https://farm5.staticflickr.com/4279/35067718253_93b04e03d6_o.jpg"><br><br>
</div><br>
<br><br><br>
<big><span style="text-decoration: underline; font-weight: bold;">發想概念:</span></big><br>
<br>
一、請設定出想要大小的DIV。並設定寬、高。<br>
二、DIV的大小,一定要和展現的照片之大小,一致。<br>
三、請在DIV內不斷的加入照片,請隨意的加入數量。<br>
四、請在DIV內套入下列的CSS。<br>
五、請copy寫入下列程式碼。<br>
六、請在DIV內,設定 onclick 功能,如下例。<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">jquery
程式碼:</span></big><br>
<br>
/* 如果已有使用下列二條設定jquery環境的程式碼,就可不必使用。 */<br>
/* 請copy 到<head> </head>或<body>之後 */<br>
<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script>
<br>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br>
<br>
<br>
<big style="font-weight: bold; text-decoration: underline;">這一範例的jquery
碼:</big><br>
<br>
/* 請copy 到<head> </head>或<body>之後 */<br>
<br>
<script><br>
<br>
(function( $ ){<br>
<br>
var numberca20170720 = 1;<br>
<br>
$.fn.myPlugin20170720 = function() {<br>
<br>
// 你的Plugin內容寫在這裡面。<br>
<br>
var numgapic = $(this).find('>img').size();<br>
var realnum = numgapic - numberca20170720;<br>
<br>
if (realnum != 0) {<br>
$(this).find('>img').eq(realnum).hide('slide', {direction: 'left'},
600);<br>
numberca20170720 = numberca20170720 + 1;<br>
}<br>
else {<br>
$(this).find('>img').show('slide', {direction: 'right'}, 600);<br>
numberca20170720 = 1;<br>
}<br>
<br>
};<br>
<br>
})(jQuery);<br>
<br>
</script><br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">設定「按下去
的地方」的onclick互動碼:</span></big><br>
<br>
/* 請設定在DIV裡 */<br>
<br>
onclick = ' <span style="color: red;">$(this).myPlugin20170720();</span> '<br>
<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">CSS語法:</span></big><br>
<br>
/* 請套入到 div 裡 */<br>
<br>
<style><br>
<br>
.idoitimgga20170719 {<br>
position: relative;<br>
border: 1px solid black;<br>
}<br>
<br>
.idoitimgga20170719 >img {<br>
position: absolute;<br>
top: 0px;<br>
left: 0px;<br>
}<br>
<br>
</style><br>
<br>
<br>
教學影音:<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/394pOmXiqgc?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-57490710257838228182017-07-19T10:21:00.002+08:002017-07-27T17:17:58.014+08:00手工自製的文 創式 content slider<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.tabtdbig20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 6.37em;
font-weight: bold;
line-height: 1.2;
-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff;
text-shadow: 3px 3px 3px silver;
text-align: center;
background-color: red;
}
.tabtdmdi20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 2.37em;
font-weight: bold;
line-height: 1.2;
color: red;
}
.tabtdmdi2017071802 {
font-family: Verdana, '微軟正黑體';
font-size: 2.37em;
font-weight: bold;
line-height: 1.2;
}
.tabindex20170718 td{
font-family: Verdana, '微軟正黑體';
font-size: 1.13em;
font-weight: bold;
line-height: 1.8;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid transparent;
border-top: 1px solid transparent;
text-align: center;
}
.tabindex20170718 td:hover {
border-left: 1px solid lightgray;
border-top: 1px solid lightgray;
cursor: pointer;
}
.tabtdmdi2017071802 {
font-family: Verdana, '微軟正黑體';
font-size: 2.37em;
font-weight: bold;
line-height: 1.2;
}
.maintextdmdi20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 1.37em;
font-weight: bold;
line-height: 1.8;
padding-right: 40%;
background-image: url(https://lh3.googleusercontent.com/b24LiljXNVc3mdBJ9g9bqdRZcO37buTnQ3yI_655PTqs5bvDLocyqCOz2K-VguFVtw2-GPThWljXx5UPn21SAkdDIAAJJ1ePE7sK-0E3Wv6xNH0uYCarbkdeAhVN3diamYpPUmVIngH7IAj0oaXXG9ZdMPe3dA2muWhXPcqeNQ2G11o_JNEymFT4B1kh4S8RE8Y7CEEXhLFxfKNnJCTfi_etXDhZ5rdM_AwGN033JFzz8-YfbficFK7cJbAfptS4OCPHnxXLF1arlaE_ihC9nSBcjBFkDNchDPovVsKm5U4nMaXOVDd9iprk3ECLmt6itVJ39Imu7yWnuRZOIygVVEioZnscaOQURW9LCRQoB4mRKJhsp0P2j6e44VOoIhqW7CFy3jqFI4nM-RcJw1DBQ4EycvhAU9BjRjycfIDvvK9SENxXLue6d2m5MxDFeANLN3dufXX0WOLMTqU3hMjlDHzrNKjxeqMKSfXaj6GIbBqv6MJn0Yj__Obe-PDbo17f8x2Th2yvin7fQhvqEJxSf75SsFPKoJXUf-DXCwJ4F4bNGBhWTvtTPGim0PX_SUcXOjRC8qs4z9Xg_K7aO_LbIjVcxqvrMUHN9KNAgc_Ij0OZdTFkvL5milhqCxd9EmTVAcAs-dHQYiJ49mPchmIgtCBliVb2Rt__gX4FYWpROANzj84=w600-h799-no);
background-repeat: no-repeat;
background-size: 200px;
background-position: top right;
}
.olliconsli20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}
.olliconsli20170718 >li {
display: inline-block;
margin-right: 0.5em;
padding: 0px 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: 0.4s;
}
.olliconsli20170718 >li:hover {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}
.chandiv {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
transform: translateY(-5px);
}
.olliconsli2017071802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}
.olliconsli2017071802 >li {
display: inline-block;
margin-right: 0.5em;
padding: 0px 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
background-color: rgba(255, 255, 255, 0.7);
transition: 0.4s;
color: black;
}
.olliconsli2017071802 >li:hover {
background-color: rgba(152, 152, 152, 0.8);
color: white;
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}
.chandiv02 {
border-radius: 25px;
border: 1px solid red;
transform: translateX(-10px);
}
#consli20170718 {
border: 1px solid black;
}
#consli20170718 img {
margin: 0px;
padding: 0px;
border: 0px solid red;
}
#consli20170718 >div:not(:first-of-type) {
display: none;
}
#consli2017071802 {
border: 1px solid black;
}
#consli2017071802 img {
margin: 0px;
padding: 0px;
border: 0px solid red;
}
#consli2017071802 >div:not(:first-of-type) {
display: none;
}
</style>
<br>
<br>
<br>
<big style="font-style: italic;"><span style="font-weight: bold;">手工自製的文
創式 content slider</span></big><br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%;"
class="tabtdbig20170718">手工<br>
自製<br>
</td>
<td style="vertical-align: top; width: 33%;"
class="tabtdmdi20170718">文創式<br>
自由思考<br>
完全想像<br>
<br>
<span style="text-decoration: underline;">這才是寫作</span><br>
</td>
<td style="vertical-align: bottom;" class="tabtdmdi2017071802">Content
Slider<br>
</td>
</tr>
</tbody>
</table>
<div style="text-align: right;">by 編輯老師<br>
</div>
<br>
<br>
<br>
<div class="maintextdmdi20170718">數位文本。在互動文本建置的思考上,要能是隨心所欲的,才能是一種「寫作狀態」。
寫作者不能被技術上的障礙,扞擾了對內容表現上的構思。我們思考的不是技術上的完整性,而是表現上的自由度!</div>
<br>
<br>
<br>
<br>
<table style="text-align: left; width: 100%;" class="tabindex20170718"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td onclick="document.location='#as20170718';"
style="vertical-align: top; width: 50%;">範例一<br>
</td>
<td onclick="document.location='#bs20170718';"
style="vertical-align: top;">範例二<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<a name="as20170718"></a><br>
<br>
<big><big><span style="text-decoration: underline; font-weight: bold;">★
範
例一:</span></big></big><br>
<br>
互動文本結構:<br>
上方的文字列,是用ol/li 技法來形成。<br>
下方是設定div,裡面再分別設置三個內文div。<br>
使用簡單的程式,來讓兩者形成互動的文本呈現關係。<br><br>
設置分解動作:<br>
一、用ol/li寫作互動導文。<br>
二、為ol/li設置CSS,以形成ol/li的呈現樣態。<br>
三、設置內文DIV。<br>
四、在內文DIV內,再設置要互動的DIV。內容寫在此DIV。<br>
五、為互動導文設置互動功能,onclick=" "。<br>
<br>
<br>
<ol class="olliconsli20170718">
<li
onclick="$(this).siblings().removeClass('chandiv').end().addClass('chandiv'); $('#consli20170718').find('div').css('display', 'none').eq(0).show('slide', {direction: 'left'}, 800);">波
妞的意識圖像</li>
<li
onclick="$(this).siblings().removeClass('chandiv').end().addClass('chandiv'); $('#consli20170718').find('div').css('display', 'none').eq(1).show('slide', {direction: 'up'}, 600);">說
明:來我們家的歷史</li>
<li
onclick="$(this).siblings().removeClass('chandiv').end().addClass('chandiv'); $('#consli20170718').find('div').css('display', 'none').eq(2).show('slide', {direction: 'right'}, 800);">在
影音中的生活</li>
</ol>
<div id="consli20170718">
<div><br>
<br>
<img style="width: 577px;" alt=""
src="https://c1.staticflickr.com/5/4238/34884465122_402c8fb9bb_b.jpg"><br>
她是來我們家的驕客。<br>
<br>
</div>
<div><br>
<br>
它是米克思 <br>
被收養的日子,忘了。<br>
<br>
太太,女兒的決定。<br>
老樣子,<br>
我是賺錢、司機和逗貓的執行者。<br>
<br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="0"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 184px;"><img
style="width: 184px; height: 123px;" alt=""
src="https://c2.staticflickr.com/6/5638/30953904425_bc12ba64c1_b.jpg"><br>
<br>
</td>
<td style="vertical-align: top; width: 184px;"><img
style="width: 184px; height: 138px;" alt=""
src="https://farm2.staticflickr.com/1508/26497913732_cd22b1f681_b.jpg"><br>
<br>
</td>
<td style="vertical-align: top;"><img
style="width: 182px; height: 121px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamLb3ovbTpNz3EpR1lwEFpb5qhmj-o9Yxkbzsti4I71OkZbBt8hT_zo4Bdg7XkulBo2u93Y60Vc-qo2tgz6KwmqxyUcToMY_hoTBPhxUyVpZxHTPIhKCRiwpsYW1byLYhlw2wE7CczDc/w1135-h757-no/IMG_7460.JPG"><br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
它都去梁動物醫院看病。<br>
平常不太愛用「高級品」。<br>
網上購物的紙箱是最受歡迎的「戰利品」。<br>
<br>
人與寵物之間的感情,是一種形上學的議題。溝通的方式是不同的,但感情是觸動同溫。<br>
<br>
<br>
</div>
<div><br>
<br>
<iframe src="https://www.youtube.com/embed/QxBi88gJG0o?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe><br>
來到我們家的第一天,我們拍起來做紀念!<br>
<br>
<br>
</div>
</div>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">CSS語法:</span></big><br>
<br>
<style><br>
<br>
/* ol的設定 */<br>
.olliconsli20170718 {<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.17em;<br>
font-weight: bold;<br>
line-height: 1.8;<br>
padding: 0px;<br>
}<br>
<br>
/* li的設定 */<br>
.olliconsli20170718 >li {<br>
display: inline-block;<br>
margin-right: 0.5em;<br>
padding: 0px 0.5em;<br>
border-left: 1px solid black;<br>
border-right: 1px solid black;<br>
border-top: 1px solid transparent;<br>
border-bottom: 1px solid transparent;<br>
transition: 0.4s;<br>
}<br>
<br>
/* ol互動的設定 */<br>
.olliconsli20170718 >li:hover {<br>
background-color: rgba(152, 152, 152, 0.3);<br>
border-radius: 25px;<br>
border: 1px solid red;<br>
cursor: pointer;<br>
}<br>
<br>
/* 按下li之後的互動變化 */<br>
.<span style="color: rgb(51, 102, 255);">chandiv</span> {<br>
background-color: rgba(152, 152, 152, 0.3);<br>
border-radius: 25px;<br>
border: 1px solid red;<br>
transform: translateY(-5px);<br>
}<br>
<br>
/* 內容div的設定 */<br>
#consli20170718 {<br>
border: 1px solid black;<br>
}<br>
<br>
/* 內容div之內的div之設定 */<br>
#consli20170718 >div:not(:first-of-type) {<br>
display: none;<br>
<br>
}<br>
<br>
</style><br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">jQuery
語法:</span></big><br>
<br>
/* 啟動 jQuery*/<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script><br>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br>
<br>
/* 產生ol/li互動效果的 jQuery*/<br>
onclick = " <span style="color: red;">$(this).siblings().removeClass('<span
style="color: rgb(51, 102, 255);">chandiv</span>').end().addClass('<span
style="color: rgb(51, 102, 255);">chandiv</span>'); </span> "<br>
<br>
/* 產生div互動效果的 jQuery*/<br>
onclick = " <span style="color: red;">$('#consli20170718').find('div').css('display',
'none').eq(<big><span style="font-weight: bold;">0</span></big>).show('slide',
{direction: '<big><span style="font-weight: bold;">left</span></big>'},
800);</span> "<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
一、/* 產生div互動效果的 jQuery*/的程式碼中,大紅字 0 是指第一個div,如果是設定的二個div,要改寫成
eq(1) ,依此類推。請參考教學影音。 <br>
二、div移動方向可以有四種,left, right, up, down ,請依需要改定。<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">影音教學:</span></big><br>
<br><iframe width="560" height="315" src="https://www.youtube.com/embed/7KPJA_Dj7xs?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<br>
<a name="bs20170718"></a><br>
<br>
<big><big><span style="text-decoration: underline; font-weight: bold;">★
範
例二</span></big></big><br>
<br>
這是上一例的變形。<br>
ol/li的寬度縮小,於是就形成長條狀的文字說明。<br>
再移動它,來和Div的內文區重疊,就會形成如下的效果。<br>
<br>
<br>
<br>
<div id="consli2017071802">
<div>1<br>
<img style="width: 576px; height: 432px;" alt=""
src="https://lh3.googleusercontent.com/akN56n3AZq6Mi3HrpAmWAOgvkc_SMdPr1gU3g6FQLOSS3y4xpFzHEc9yXk1GL05kAtGblIQPJOJk3Hle-bln9DAdiCeJDxVVqc-ojPAnkuyg029BYE-1aJJEWSBNiOveyogckz-VdJzhvolTpLqjXgWbpv5ZsWISsPn96D_K2GI5OIgmVsOQaEd-6c2mcOdUWPB-vFxi45eIPyQDxkm60u95czhP0a9MZRmZ-cG9q-cbdRk3aP7VzDOCuZ-NPWoRo46cFbGOTkhMpIsyDBMMFWUnVaWdjJ9sqmUV9nHkVQlzUXNPFkfIrM4LrNf_wdQriN7AoohTwG4a8FTHZe0VDzQO-gBff3JNEzRGzRclK3Yzol1CGU7PTkWux_LTN1jV7DuzfMCabtGuwV6QBDvwFKPRMVJyHITrnndBJIQT71A3IdWciQE7w6ZBHiTFHczCjLISyJs50qC9WEyeuooTHYAqhVk4ScLEjukcpJXLHFzUKrOm_M_kT4FsNmYMt3rxc4TT_F6-qS_n8wUPKtmY52jU5SQdZcFebhBrpREMtB7TiEqLf0ZWIyh1Lg0RN3NVMTaKqbPiNd1cderJ41sdz_CDKSgGm7ZVy9eF8AJkiMgqFgsaHHELOJdQV-FCu0zZq_sdwMy3f_bzCT6iUAspLChbToItviRQnuNDAYGAUQAdH3o=w1139-h854-no"><br>
<br>
</div>
<div>2<br>
<img style="width: 576px; height: 432px;" alt=""
src="https://lh3.googleusercontent.com/BdQM9T3x8r0w5UkHMwnIASqlWQJOQn4qgg-BN79K9dxevMV5h2fisDdLFEwR66Js4Okj5GRDvc2evj2re_T5wiD1rgg-NvseMKcW6W3wyVzBiEOUDYuoEsQV-TyoSGJOEJuTshCWQZxWJ71K8_W0EBs_JNAnpXbjS9vQNXC9vI8XT1DF5549uG1GyIiYScxGMjCaeRjzZcX3_jl_9OHZgSsDYG2Dab2UFJm7_AfE-abcBzDFaVCkPBoTzguj_SLP8f_EEw_wk9he58182qzJmeDf0inDZsD-jLp5m3x7f71Oad4DQWauRurc000hzGSpqEZCqGCz6OP3Ik5joUOKV91AkKrFdLUi2xn4-znYAdclpcMQTFm-d-_9-tH2H327Lf3bPk-IgfoyIWYDpNNPPteS7GLmft6GRh9RVKC6DCAfradsvGOhOO49Yawcys5LCTClyN8H0RNjFp4VY69gR9ETNuIW3m9Evrsi1_D_Zahb7DwwN246Lk1IoG6Fz09bBaqYLywb7ev1MlmAT1UDFA5R1RLzFacre9DhoszyQTbylwM91fQHrKh6uiLvJuwvw165ayx24Jmlnmkc-POWalWz813DNoCr0AlsCEUxpK7fhBasqIvVDbUVeZWAfbQavCOCyXaEe86Pld9V_u0Vf-t8wmMfeWQVzCfjM67l1CBkCc0=w1139-h854-no"><br>
<br>
</div>
<div>3<br>
<img style="width: 576px; height: 432px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWwOdDZ4x6fom47LNQrqZJ8hiInRD44g1b03i-kBi5SYDPlPhyPzcEEpKpXxDf1x0hSnePF5W6cqStFJF8uiUQG1qaPhfn-r23FR3FWHGSCeoz9nA5io0B-mNk2hyphenhyphenGsFD1tnzlduk2mu8/w1139-h854-no/"><br>
<br>
</div>
<div>4<br>
<img style="width: 576px; height: 432px;" alt=""
src="https://lh3.googleusercontent.com/aWfPJrmHNFzalZNh1W2mcsrsDaOq9gWxmxo1YNk4Oeuk2PSzeaOEzapibRXf28Yd2zzYzEvloX5iwm-fbSS4-Ex_m2FgK9JgklymLMQpTF6LJ60vD53XM6obIK0IpsflKh3glw2LcNiXXeMz3JrV8MGVv62V4cWpPAmfx322OIoHFtC1V223EjaJFe8YK-xNqdO5GrwRH14thGqO5EvqKIIOBrEke-tR3hk6tgd9QM9OtO3kJKjZkshOPoga1iSP9V7AXMBP2w4rNPjidK873qh5NLMhblHwjH0pmoQRW3KfRxSgtF1urefPnBUVKt0YYZ5u4eNSjGfE9CQau4UFDAosep0xxHwr43dDbrsmVxk7gcJXeTV49OtahipZ6N8QSzsGHCR3BjyiQsrMeu7PmCCv6u24zRjJmilHsjUMonl-yuhpaGVK8AIrWr9H1rgXA39NQP-GdP4lCEPjqEe66K8Q6XRqgF1WbWTMieIfAwFbL92-5o2O8feGT-yTwfDO1KMDENS3zqTO7wT3055bjpbMHgnc9VSixc9gm9W-rFifevzUuHxxekc3_MkErUAdDBwkLPhq4nH-W_3UxEdLLrae8bcNK1YH-HS2jhIUb6P_zH2duoWtE53DxiWsqzVDi8uoOkb8S-usXVmq0qT46gaI0enN8JzfvHcVnkLCtnx7E7s=w1139-h854-no"><br>
<br>
</div>
</div>
<br>
<ol style="width: 100px; margin-top: -154px;"
class="olliconsli2017071802">
<li
onclick="$(this).siblings().removeClass('chandiv02').end().addClass('chandiv02'); $('#consli2017071802').find('div').css('display', 'none').eq(0).show('slide', {direction: 'left'}, 800);">觀
霧</li>
<li
onclick="$(this).siblings().removeClass('chandiv02').end().addClass('chandiv02'); $('#consli2017071802').find('div').css('display', 'none').eq(1).show('slide', {direction: 'up'}, 800);">藍
雲</li>
<li
onclick="$(this).siblings().removeClass('chandiv02').end().addClass('chandiv02'); $('#consli2017071802').find('div').css('display', 'none').eq(2).show('slide', {direction: 'down'}, 800);">綠
影</li>
<li
onclick="$(this).siblings().removeClass('chandiv02').end().addClass('chandiv02'); $('#consli2017071802').find('div').css('display', 'none').eq(3).show('slide', {direction: 'right'}, 800);">驕
陽</li>
</ol>
<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">CSS
語法:</span></big><br>
<br>
<style><br>
<br>
/* ol的設定 */<br>
.olliconsli2017071802 {<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.17em;<br>
font-weight: bold;<br>
line-height: 1.8;<br>
padding: 0px;<br>
}<br>
<br>
/* li的設定 */<br>
.olliconsli2017071802 >li {<br>
display: inline-block;<br>
margin-right: 0.5em;<br>
padding: 0px 0.5em;<br>
border-left: 1px solid black;<br>
border-right: 1px solid black;<br>
border-top: 1px solid transparent;<br>
border-bottom: 1px solid transparent;<br>
background-color: rgba(255, 255, 255, 0.7);<br>
transition: 0.4s;<br>
color: black;<br>
}<br>
<br>
/* ol互動的設定 */<br>
.olliconsli2017071802 >li:hover {<br>
background-color: rgba(152, 152, 152, 0.8);<br>
color: white;<br>
border-radius: 25px;<br>
border: 1px solid red;<br>
cursor: pointer;<br>
}<br>
<br>
/* 按下li之後的互動變化 */<br>
.chandiv02 {<br>
border-radius: 25px;<br>
border: 1px solid red;<br>
transform: translateX(-10px);<br>
}<br>
<br>
<br>
/* 內容div的設定 */<br>
#consli2017071802 {<br>
border: 1px solid black;<br>
}<br>
<br>
/* 內容div之內的div之設定 */<br>
#consli2017071802 >div:not(:first-of-type) {<br>
display: none;<br>
}<br>
<br>
</style><br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">jQuery
互動語法:</span></big><br>
<br>
/* 啟動 jQuery;<span style="color: red;">如果下二條已有被使用,就可以省略。一網頁中,只要出現一次就可以</span>*/<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script><br>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br>
<br>
<br>
/* 產生ol/li互動效果的 jQuery*/<br>
onclick = "
$(this).siblings().removeClass('chandiv02').end().addClass('chandiv02');
"<br>
<br>
/* 產生div互動效果的 jQuery*/<br>
onclick = " $('#consli2017071802').find('div').css('display',
'none').eq(0).show('slide', {direction: 'left'}, 800); "<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">影音教學:</span></big><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-89835021833583087492017-07-14T11:08:00.003+08:002017-07-28T14:50:56.376+08:00互動跳躍連結中標列表:使用表格法<style>
td.tdbigtitle20170714 {
font-family: Verdana, '微軟正黑體';
font-size: 5.13em;
font-weight: bold;
line-height: 1em;
color: red;
}
td.tdmidtitle20170714 {
font-family: Verdana, '微軟正黑體';
font-size: 2.13em;
font-weight: bold;
line-height: 1em;
color: black;
border-bottom: 1px solid black;
}
table#midintin20170713 {
font-family: Verdana, '微軟正黑體';
font-size: 1.13em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}
table#midintin20170713 td{
border-left: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
}
table#midintin20170713 td:hover{
background-color: rgba(132, 132, 132, 0.3);
border-radius: 25px;
cursor: pointer;
}
.mdititle20170713 {
font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 2;
text-align: left;
padding-left: 4em;
letter-spacing: 0.1em;
background-image: url(https://lh3.googleusercontent.com/WD9o-k84nlehHJrI6fGsVoXxtsNywIY6GsTyCKRWKxyf39VHRqv9Q0hHUp3KELCsjaVWDjwG__ejVroONiHoZ-mCNq71gkrXchKM-PrJzbfONVfRQ-GcosjGxVRc9E6w_cKnqwSrFfBOgR2r-b8VbqmrG-uZvdd9RM3uGQohTqO89xK5INoDqqY1sS-TG5d7JxiM6BcPPKmkL1PRoj-ppVzM9__0ETOlAn1ZqsuX7u8C-db42a9hPe9HSJOhPb0A17J14s37C7q9bSzG5C7izIKkZrCqjOy2ATjod4qtxWt1oqgLYDGj1RKg6ZTsdvlcRa1u2WWcR8acmUZnmYO8sVh7ukmC9ksyQoXjOkQ7l0Cx-0ccprJUPINnYxNZlluqG9KiZsJ9L2LvxVF5vmNFFUoeJzoF2_kpJyYCCOxve2BgfDTt_dUCmOUbk5I4-pJxIEE2MO18IxcnOKR-q5JycB22THxg44J2-615nSn9UZBVzH1eAiBOyBuueMgHxW_w96N8jJkzFZbA1KrMk4OQ1u-xhFd230-HWuQ7rAQaUIZyrUiyN3jvWVjp-QAQ9AlRWLB1EDmcEyAC0TmdBO7A4kfIx2RBU6kCpyb3VsucGJk8joo7XjOWlIf4yA=w396-h388-no);
background-repeat: no-repeat;
background-size: 34px;
background-position: left center;
text-shadow: 1px 1px 1px lightgray;
}
table#midintin20170714 {
font-family: Verdana, '微軟正黑體';
font-size: 1.15em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}
table#midintin20170714 td{
border-bottom: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
}
table#midintin20170714 td:hover{
background-color: rgba(132, 132, 132, 0.2);
transform: translateY(-5px);
cursor: pointer;
}
.tdbacoin20170714 {
background-color: rgba(132, 132, 132, 0.2);
transform: translateY(-5px);
box-shadow: 1px 1px 1px 1px silver;
}
table#midintin2017071302 {
font-family: Verdana, '微軟正黑體';
font-size: 1.13em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
}
table#midintin2017071302 td{
border-left: 1px solid black;
border-right: 1px solid black;
transition: 0.4s;
text-align: center;
}
table#midintin2017071302 td:hover{
background-color: rgba(132, 132, 132, 0.3);
border-radius: 25px;
}
.backimg20170714 {
background-image: url(https://lh3.googleusercontent.com/NURlJHGqAP2XA5pU2uWlYPxWOK0SBwQEniK-QWDBzxu6zWJA4yJ38k31NT0ELWN4zM5frBWt-Yq_KBRdF2_j5US2-tat5qHab3Jmzp6rdimo4KG5HyioTZHkUE1TkyChbQlu-wsFJdeo8GtiUI3zLtn7wrSdpB4OwivbLDAHP6bO_6d_wK0CdrZRYR3uc9NQLk6QNFjAxjYOtw1NkPl8scqHtetsbK0OjceJsLVCFAF9KdOfdERZeYIHr5LSwVAJsaC42xm2-GRYevndkcTg8hMdl9neSTC7sG89LQFh78iv-nNh3Pj1BgSKObKKbNFfLG4YJcPZpFSQp8sFjZAdPttvQipsZmxHm8H5KGtZR6cuJwtM102tNP_3G3GZGcTrEb1I3IaP1QvMo2m2LN_DyN1FiFiaV8Y6NCUOSh34VcJFtgIelyyjKBHlMhQlyqmWosG-nMCaGphgeWquZDkNxDTXqPMc1TcrZ3npHogg8iF7cPn_slW-PCg8AqGph4ZsinUM-8WS-jNuhgk4nqUsdpbaFJ_kGMqfFz2G-YhJHINB7ufG25VudOVacCLF6_QJoeSc9sgETKPAX7RgBoIUmwfJUa8DOiwZa7v4ah3Kdq7SRlQA4GkB6qJZLw=s512-no);
background-repeat: no-repeat;
background-size: 200px;
background-position: top right ;
transition: 0.4s;
}
.backimg20170714:hover {
background-size: 100px;
}
</style>
<script>
$(function() {
$( "table#midintin20170714" ).find("td").click(function() {
$(this).parent().find("td").removeClass("tdbacoin20170714").end().end().addClass("tdbacoin20170714");
});
});
</script>
<script>
$(function() {
$( "table#midintin20170713" ).find("td").click(function() {
$(this).parent().find("td").removeClass("tdbacoin20170714").end().end().addClass("tdbacoin20170714");
});
});
</script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 680}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 5em;
right: 15px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 1.39em;
font-family: 微軟正黑體;
font-weight: bold;
letter-spacing: 0.1em;
padding: 0.5em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}
.divw20170728a {
font-size: small;
text-align: right;
}
</style>
<a href="#" class="back-to-top"> 回到頁首 </a>
<br>
<br>
<br>
<br>
<br>
<br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"
class="tdbigtitle20170714">跳躍連結<br>
</td>
<td style="vertical-align: top;" class="tdmidtitle20170714">讀者可以快速<br>
找到所要讀的內容<br>
</td>
</tr>
</tbody>
</table>
<div class="divw20170728a">by 編輯老師</div>
<br>
<br>
<div class="backimg20170714">
<big style="line-height: 1.6;">互動文本,很容易產生「網路迷航」的狀況。<br>
讀者在和文本互動的過程中,最後就找不到閱讀的方向了。<br>
於是,<br>
讀者就會放棄閱讀。<br>
替讀者思考這一問題,是數位文本寫作者要具備的全新的寫作思考概念。而跳躍連結這一功能,是最基礎的寫作技能。<br>
</big><br>
</div>
<br>
<br>
<br>
<br>
<br>
<table style="text-align: left; width: 100%;" id="midintin20170713"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td onclick="document.location='#ap0714a';"
style="vertical-align: top; width: 184px;">使用表格:簡單型<br>
</td>
<td onclick="document.location='#ap0714b';"
style="vertical-align: top; width: 183px;">使用表格:進階型<br>
</td>
<td onclick="document.location='#ap0714c';"
style="vertical-align: top;">使用 ol/li:快速型<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<hr style="width: 100%; height: 2px;"><br>
<a name="ap0714a"></a><br>
<br>
<div class="mdititle20170713">使用表格:簡單型</div>
<br>
<br>
使用表格,來形成中標列表。<br>
表格可以形成規律感,同時可以讓創作者隨意的校調所要的格數,以及呈現效果。<br>
<br>
<table style="text-align: left; width: 100%;" id="midintin2017071302"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 136px;"><a href="#ap0713a">第
一區塊</a><br>
</td>
<td style="vertical-align: top; width: 136px;"><a href="#ap0713b">第
二區塊</a><br>
</td>
<td style="vertical-align: top; width: 135px;">第三區塊<br>
</td>
<td style="vertical-align: top;">第四區塊<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">CSS語法:</span><br>
<br>
<style><br>
/* 表格字型 請放置於table裡*/<br>
table#<span style="color: red;">midintin2017071302</span> {<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.13em;<br>
font-weight: bold;<br>
line-height: 1.8em;<br>
letter-spacing: 0.1em;<br>
}<br>
<br>
/* 格子的呈現樣態 */<br>
table#midintin2017071302 td{<br>
border-left: 1px solid black;<br>
border-right: 1px solid black;<br>
transition: 0.4s;<br>
text-align: center;<br>
}<br>
<br>
/* 格子的互動效果 */<br>
table#midintin2017071302 td:hover{<br>
background-color: rgba(132, 132, 132, 0.3);<br>
border-radius: 25px;<br>
cursor: pointer;<br>
}<br>
<br>
</style><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">寫作注意事項:</span><br>
一、使用「錨點」功能,來設定所要到達的定位點。<br>
二、使用「連結」功能,來設置所要按下去的標題。<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">教學影音:</span><br>
<br>
<br>
<br>
<br>
<a name="ap0714b"></a><br>
<br>
<div class="mdititle20170713">使用表格:進階型</div>
<br>
<br>
進階型,除了使用CSS來形成變化外,更加上了jQuery的程式使用。<br>
這樣,就可以產生更具變化感受的互動效果。<br>
事實上,不斷思考「互動」的呈現效果,所可能帶來在對文本理解上,產生「更多意義」的理解感受,是數位文本重要的意義給出特色。<br>
<br>
<table style="text-align: left; width: 100%;" id="midintin20170714"
border="0" cellpadding="2" cellspacing="3">
<tbody>
<tr>
<td onclick="document.location='#ap0713a';"
style="vertical-align: top; width: 182px;">第一區塊標題<br>
</td>
<td onclick="document.location='#ap0713b';"
style="vertical-align: top; width: 182px;">第二區塊標題<br>
</td>
<td onclick="document.location='#ap0713c';"
style="vertical-align: top;">第三區塊標題<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">jQuery程式碼:</span><br>
<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">範例 CSS 語法:</span><br>
<br>
<style><br>
<br>
/* 表格字型 請放置於table裡*/<br>
table#<span style="color: red;">midintin20170714</span> {<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.15em;<br>
font-weight: bold;<br>
line-height: 1.8em;<br>
letter-spacing: 0.1em;<br>
}<br>
<br>
table#<span style="color: red;">midintin20170714</span> td{<br>
border-bottom: 1px solid black;<br>
border-right: 1px solid black;<br>
transition: 0.4s;<br>
}<br>
<br>
table#<span style="color: red;">midintin20170714</span> td:hover{<br>
background-color: rgba(132, 132, 132, 0.2);<br>
<br>
transform: translateY(-5px);<br>
cursor: pointer;<br>
}<br>
<br>
/* 按下去後互動結果的參數*/<br>
.<span style="color: rgb(51, 102, 255);">tdbacoin20170714</span> {<br>
background-color: rgba(132, 132, 132, 0.2);<br>
transform: translateY(-5px);<br>
box-shadow: 1px 1px 1px 1px silver;<br>
}<br>
<br>
<style><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">本範互動jqyery程
式碼:</span><br>
<br>
<script><br>
$(function() {<br>
$( "table#<span style="color: red;">midintin20170714</span>"
).find("td").click(function() {<br>
<br>
$(this).parent().find("td").removeClass("<span
style="color: rgb(51, 102, 255);">tdbacoin20170714</span>").end().end().addClass("<span
style="color: rgb(51, 102, 255);">tdbacoin20170714</span>");<br>
});<br>
});<br>
</script><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">停止定位錨點語法:</span><br>
<br>
<a name="<span style="color: red;">ap0713b</span>"></a><br><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">跳躍連結「按下去處」語
法:</span><br>
/* 請設定在TD裡面*/<br>
<br>
onclick=" <span style="text-decoration: underline;">document.location='#</span><span
style="color: red; text-decoration: underline;">ap0713b</span><span
style="text-decoration: underline;">';</span> "<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">影音教學:</span><br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vhqOet6cFmM?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<br>
<a name="ap0714c"></a><br>
<br>
<div class="mdititle20170713">使用 ol/li:快速型</div>
<br>
<br>
<br>
<br>
<br>
<div><big>請參考教學網頁一。<a
href="http://lmcmultimedia.blogspot.tw/2014/06/blog-post_18.html"
target="_blank">可以互動的跳躍連結中標列表</a></big></div>
<div><big>請參考教學網頁二。<a
href="http://lmcmultimedia.blogspot.tw/2013/11/blog-post.html"
target="_blank">浮動的導覽列: 〈回到頁首〉</a></big></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
以下是跳躍連結的使用範例<br>
<hr style="width: 100%; height: 2px;"><br>
<br>
<br>
<br>
<a name="ap0713a"></a><br>
1<br>
2<br>
3<br>
4<br>
<div class="mdititle20170713">第<span style="color: red;">一</span>區塊的中標區</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="ap0713b"></a><br>
<br>
<br>
<br>
<div class="mdititle20170713">第<span style="color: red;">二</span>區塊的中標區</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="ap0713c"></a><br>
1<br>
2<br>
3<br>
<div class="mdititle20170713">第<span style="color: red;">三</span>區塊的中標區</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
使用範例 end!!<br>
<hr style="width: 100%; height: 2px;"><br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-49702176061616663932017-06-30T16:32:00.004+08:002017-07-05T23:25:09.405+08:00表格空間寫作的練習題(一)
<style>
div {
border: 0px dotted green;
}
.backimage0615 {
background-image: url(https://c1.staticflickr.com/5/4245/34824768352_c192ed5e5e_b.jpg);
background-repeat: no-repeat;
background-size: 560px;
background-position: left bottom;
transition: 1s;
}
.backimage0615:hover {
background-size: 720px;
background-position: left -120px bottom -30px;}
.backimage0615:hover div{
padding-right: 15em;
}
.tabback0615 {
background-color: rgba(255,181,181,0.4);
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 2;
text-align: center;
letter-spacing: 0.1em;
color: white;
}
.bigtitex0615{
font-family: Verdana, '微軟正黑體';
font-size: 2.3em;
font-weight: bold;
line-height: 1.5;
text-align: center;
letter-spacing: 0.12em;
text-decoration: underline overline;
margin: auto;
}
.midtitex0615{
font-family: Verdana, '微軟正黑體';
font-size: 1.7em;
font-weight: bold;
line-height: 1;
text-align: center;
letter-spacing: 0.1em;
}
.littitex0615{
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1;
text-align: center;
letter-spacing: 0.04em; transition: 2s;
}
.littitle0615{
font-family: Verdana, '微軟正黑體';
font-size: 1.1em;
font-weight: bold;
line-height: 1;
letter-spacing: 0.1em;
border-left: 6px solid black;
padding-left:0.5em;
}
.tamov2017070501 {
margin-top: -3em;
transition: 1s;
}
.tamovdown2017070501 {
margin-top: 3em;
}
</style>
<br>
<br>
<br>
<div class="midtitex0615"> 跟著練習就會做!</div>
<div> </div>
<div class="bigtitex0615"> 表格空間寫作的練習題</div>
<div class="littitex0615"> step-by-step搞定技法的寫作困難</div>
<br>
<br>
<br>
<br>
<div class="littitle0615"> 演練範例:</div>
<br>
<div><img style="width: 560px; margin: 0px; padding: 0px;" alt="" src="https://lh3.googleusercontent.com/Llk_WbLA3m__sXAXSemlnYjRIfsHtBv6oMTR6ym9DSdihXAaOshvsUIZs8KHGTfvwxaCJsfPlQxXktA9chSo1Y47XYMqAQE0vZdDu2RHhy6YUqlifYYxN-NrA6KWgkH_wxDCIeqIotvKYOxR4Oz6O3x4HeyNmM3Yju6GVbFkSicKIVErNvexcHWdd10hnCovym8eFJBEljXNhEmCrvqG9e5EiEPBYQh7sV9UIGVnFpfYSAVOIamHATWr00EEaUSX9x4i518t8yc8VFbVeiTSu4yhMwZj9sOeX1xCkI4EtgR5x56LCqVxJnnKkNbQx8ho9EUOJk9snAevVrznE17_0WcTo79_HJ0Fj9IX3JM27YncQlkeMK60uNgSXQ2h3ZP5xMh7xlklxAYIgn6UL2fjv_zRHwf9ZrmPf9XMjJQrxmkD56IDawN2qTu9ksJVf23Gzu0ral65WAR56w3vAwPSR01lckaOzeKDlPfiS1POVuF6Idvd3sjHGpmQNnuGlKdapmJvYgg-b9KrBfvZR-T1fxHxA4J5oNnOy3v091jMXmSXdqQDOd7OrFf7FdCG9MmLFzPkB7zFoLXX4okG7LPMvQpTqDPjTybTtLxbQyzomnmUxk9r-UPSbA=w615-h819-no"><br>
</div>
<br>
<div class="littitle0615"> 觀察思考方向:</div>
<div> </div>
<ol>
<li>觀察是否規律性構成,決定是否適合使用表格技法。</li>
<li>使用二個表格來形成上、下式的拼貼組構,可快速完成。</li>
<li>上表格的圖使用背景圖技法,可隨意編輯內含文字。</li>
<li>可以再增加什麼樣的互動表現?</li>
</ol>
<br>
<br>
<br>
<div class="littitle0615"> 練習所做的成果: <span style="background-color: lightgray; border-right: 1px solid black; border-bottom: 1px solid black; cursor: pointer;" onclick="$('.tamov2017070501').toggleClass('tamovdown2017070501');">按這裡看 表格堆積的效果變化 click here!</span></div>
<br>
<table class="backimage0615" style="width: 560px; height: 346px;" border="0">
<tbody>
<tr>
<td style="background-color: transparent; vertical-align: top;"><br>
<div style="border-bottom: 1px dotted green;" class="littitex0615">
一次無法忘懷的印象<br>
<br>
北海岸<br>
風、雨與急馳的電軌車</div>
<br>
</td>
</tr>
</tbody>
</table>
<table class="tamov2017070501" style="width: 560px; " border="0" cellspacing="2">
<tbody>
<tr>
<td class="tabback0615" colspan="3" rowspan="1" style="width: 182px; ">走
過的風景線,是一點一點的靜默<br>
</td>
</tr>
<tr>
<td><img style="width: 182px; margin: 0px; padding: 0px;" alt="" src="https://c1.staticflickr.com/5/4222/34600476780_ac57181174_b.jpg"><br>
</td>
<td><img style="width: 182px; margin: 0px; padding: 0px;" alt="" src="https://c1.staticflickr.com/5/4273/34824771292_bf1bdccbd6_b.jpg"><br>
</td>
<td><img style="width: 182px; margin: 0px; padding: 0px;" alt="" src="https://c1.staticflickr.com/5/4252/34600475970_836bec1bf5_b.jpg"><br>
</td>
</tr>
</tbody>
</table>
<br>
<u><b>值得注意的所使用技法:</b></u> 插入背景圖、透明背影色、寫作元素位移<br>
<u><b>所增加的互動變化技法:</b></u> 背景圖、文字DIV的互動變化<br>
<br>
<br>
<br>
<br>
<div class="littitle0615"> 影音教學:</div>
<br>
<br>
<br>
<div class="littitle0615"> 範例使用CSS:</div>
<br>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-41841145193110091612017-06-28T20:16:00.002+08:002017-06-29T21:35:04.500+08:00表格技能(四):合併儲存格的技巧<style>
.tdbackimg20170628 {
background-image: url(https://c1.staticflickr.com/4/3935/32796841074_ca113e51e3_b.jpg);
background-repeat: no-repeat;
background-size:800px;
background-position: -300px -50px;
}
.tdbackimg2017062802 {
background-image: url(https://c1.staticflickr.com/3/2945/32668713980_63bcb7a930_b.jpg);
background-repeat: no-repeat;
background-size:980px;
background-position: -400px -100px;
}
#bain20170628 {
transition: 1s;
}
#bain20170628:hover {
border: 1px solid transparent;
}
.tdbackimg2017062803 {
background-image: url(https://c1.staticflickr.com/3/2388/32513960380_11c67321e2_b.jpg);
background-repeat: no-repeat;
background-size:640px;
background-position: -200px -100px;
}
.tdbackimg2017062804 {
background-image: url(https://c1.staticflickr.com/3/2485/32079452063_5b219ba64d_b.jpg);
background-repeat: no-repeat;
background-size: 720px;
background-position: -50px -20px;
}
#bain2017062802 {
transition: 1s;
}
#bain2017062802:hover {
border: 1px solid transparent;
}
.span20170626 {
font-family: Verdana, '微軟正黑體';
padding: 0.5em;
font-size: 1.16em;
font-weight: bold;
line-height: 4;
letter-spacing: 0.1em;
border-top: 2px solid black;
border-bottom: 2px solid black;
border-left: 8px solid black;
border-right: 8px solid black;
}
.bigtitle0120170629 {
font-family: Verdana, '微軟正黑體';
font-size: 3.1em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 2px 2px 1px rgba(132,132,132,0.6);
}
.bigtitle012017062902 {
font-family: Verdana, '微軟正黑體';
font-size: 2.1em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 2px 2px 1px rgba(132,132,132,0.6);
}
</style>
<br><br>
<table
style="border-left: 5px solid black; text-align: left; width: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td
style="border-right: 5px solid black; vertical-align: top; text-align: right;"
class="bigtitle012017062902">合併儲存格的技巧 <br>
</td>
<td style="vertical-align: top; width: 33%;"><br>
</td>
</tr>
<tr>
<td style="border-right: 3px solid red; vertical-align: top;"
class="bigtitle0120170629" colspan="2" rowspan="1">創造規律中的不規律<br>
</td>
</tr>
</tbody>
</table>
<big><span style="text-decoration: underline; font-weight: bold;">使用表格的合
併儲存格功能,能使得有創意的「規律性」美感,直觀的呈現!</span></big><br>
<br>
<span class="span20170626">構思注意事項</span><br>
<div style=" line-height: 2;">
一、要記著規律性的重要性,保持規律性下的合併表格。<br></div>
<div style="text-indent: -2em; margin-left: 2em;">
二、在做表格時,不管是欄或列。都要保持著有一欄或一列是「完整狀況」,亦即是沒有做出合併動作。來讓電腦做為計算之用的基準。請看影音教學。<br></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/m8j6CIuK-Fc?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<br>
左、右各二比一的布局:<br>
<table id="bain20170628" style="text-align: left; width: 640px; transform: translateX(-60px);" border="1" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; height: 430px;" class="tdbackimg20170628" colspan="1" rowspan="2"><br>
</td>
<td style="vertical-align: top; width: 1px;"><br>
</td>
<td style="vertical-align: top; height: 215px; "><img style="width: 306px; height: 204px; padding: 0px; margin: 0px;" alt="" src="https://c1.staticflickr.com/5/4207/35585497255_60a2999b87_b.jpg"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;" class="tdbackimg2017062802" colspan="1" rowspan="2"><br>
</td>
</tr>
<tr>
<td style="vertical-align: bottom; width: 306px;"><img style="width: 315px; padding: 0px; margin: 0px;" alt="" src="https://c1.staticflickr.com/5/4206/35455354431_2057cab1db_b.jpg"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
<br><br>
列的合併表格:<br>
<table id="bain2017062802" style="text-align: left; width: 640px; transform: translateX(-60px);" border="1" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 208px;"><br>
</td>
<td style="vertical-align: top; width: 208px;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1" style="vertical-align: top;"><img style="margin: 0px; padding: 0px; width: 420px; height: 280px;" alt="" src="https://c1.staticflickr.com/4/3749/32740761002_eb1aea4e2d_b.jpg"><br>
</td>
<td style="vertical-align: top;" class="tdbackimg2017062803"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top; height: 280px;" class="tdbackimg2017062804" colspan="3" rowspan="1"><br>
</td>
</tr>
</tbody>
</table>
<br><br><br>
M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-39731129417304559142017-06-19T22:17:00.006+08:002022-12-13T12:21:34.267+08:00 DIV:區塊編輯基本概念&css選擇器<link rel="stylesheet"
href="http://lmcdwriting.org/userfiles/lmc201708/hint.css-2.5.0/hint.css">
<script>
$(function() {
$(".divspan1102 >big").slice(0, 3).click( function () {
$(".divspan1102 >big").slice(0, 3).css({"background-color": "lightgray", "border-bottom": "1px solid black", "border-right": "1px solid black", "border-top": "1px solid whitesmoke", "border-left": "1px solid whitesmoke", "color": "black"});
$(this).css({ "background-color": "silver", "border-top": "1px solid black", "border-left": "1px solid black", "border-bottom": "1px solid whitesmoke", "border-right": "1px solid whitesmoke", "color": "white"});
});
$(".divspan1102 >big").slice(3).click( function () {
$(".divspan1102 >big").slice(3).css({"background-color": "lightgray", "border-bottom": "1px solid black", "border-right": "1px solid black", "border-top": "1px solid whitesmoke", "border-left": "1px solid whitesmoke", "color": "black"});
$(this).css({ "background-color": "silver", "border-top": "1px solid black", "border-left": "1px solid black", "border-bottom": "1px solid whitesmoke", "border-right": "1px solid whitesmoke", "color": "white"});
});
});
</script>
<style type="text/css">
.divspan1102 {
}
.divspan1102 big{
padding: 3px;
border-bottom:1px solid black;
border-right:1px solid black;
border-top: 1px solid whitesmoke;
border-left: 1px solid whitesmoke;
background-color: lightgray;
cursor: pointer;
}
.viewdis {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.1em;
border-radius: 60px;
background-color: lightsalmon;
}
</style>
<style type="text/css">
.bigword20170618 {
font-size: 2.97em;
font-weight: bold;
line-height: 1.6;
font-family: Verdana,'微軟正黑體';
letter-spacing: 0.01em;
text-decoration: underline;
text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
border: 2px solid red;
color: black;
}
.midword20170618 {
font-size: 1.3em;
font-weight: bold;
line-height: 1.9;
font-family: Verdana,'微軟正黑體';
letter-spacing: 0.1em;
text-decoration: underline;
text-decoration-style: wavy;
color: red;
padding-left: 4em;
background-color: black;
}
.midword2017061802 {
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
font-family: Verdana,'微軟正黑體';
letter-spacing: 0.1em;
color: red;
padding-left: 4em;
background-color: black;
}
.midword2017061803 {
display: inline-block;
font-size: 1.13em;
font-weight: bold;
line-height: 1;
font-family: Verdana,'微軟正黑體';
letter-spacing: 0.1em;
border-left: 7px solid green;border-right: 7px solid green;
padding-left: 0.5em; padding-right: 0.5em;
}
.mainword2017061801 {
font-size: 1.01em;
font-weight: normal;
line-height: 1.7;
font-family: Verdana,'微軟正黑體';
letter-spacing: 0.1em;
}
.mainword2017061801 ol{
border: 1px solid green;
}
.mainword2017061801 li{
margin-left: -10px;
font-weight: bold;
transition: 1s;
}
.mainword2017061801:hover ol{
border: 1px solid lightgreen;
}
.mainword2017061801:hover li{
margin-left: -30px;
color: darkred;
text-shadow: 1px 1px 1px lightgray;
}
.spanbor20170619 {
display: inline-block;
line-height: 1.6;
border-bottom: 1px solid black;
border-right: 1px solid black;
background-color: #E0E0E0;
cursor: pointer;
}
.divmove20170619 {
animation: myani20170619 3s 1;
animation-fill-mode: none;
}
@keyframes myani20170619 {
30% {transform: translate(300px, 0px); opacity: 1;}
65% {transform: translate(300px, 300px); opacity: 1;}
100% {transform: translate(0px, 0px); opacity: 0.6;}
}
.divword20171006a {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: 800;
line-height: 1.8;
letter-spacing: 0.07em;
background-color: rgba(152, 152, 152, 0.45);
border-radius: 20px;
}
.divword20171006b {
font-family: Verdana, '新細明體';
font-size: 14px;
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.divchange20171010 {
box-shadow: 2px 2px 5px silver;
border-radius: 25px;
transform: rotate(-3deg);
background-color: #FFED97;
border: 1px solid gray;
}
#diexaar20171029 {
border: 1px solid transparent;
transition: 0.6s linear;
}
#diexaar20171029:hover {
border: 1px solid green;
}
.divbacimg2017103101 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: 900;
line-height: 1.8;
letter-spacing: 0.04em;
background: rgba(152, 152, 152, 0.3) url(https://lh3.googleusercontent.com/h7aYU6Ni2BFL5L6auWdPgxImKYiyMWoHC4fi5rGIPBV1ANUAWG8jRCikF-lLdTYqU2MT_AWVKs8PGODnOXCM-xJDW9A4oNPSi7gpHi5H4gawMdN8slUVW9fBNUff5p08_KzHd6up5VDMqtWSlIsV9jAiu4hY4B2Th2HZwq7Sf0nDLsi8zTfHq4dN7yAAT97Aqgo1CYWooDjQzlR74GWVO-xqrBggzHewIdNA9JvLtwBfxc3nQcy4SgCfU8wsQgMOufKTNs0l6yV1L8k6PYT5-uWD9-rj9_uVV7KGs6J16PehaG1EKjOAg2bk54y_93umv-Z8NtsdknuxVBest6kfPBXggT-dveDcyal2RtAC9HenN9hibVobtMK4t6BrE1uUYhjLYl8fc9AapC4Vc93KxEoLGsMc8Ahb_16usrttMw6SB5t4ojRMhOk3iQ4xBEf6FzPKQRa3_uXdrD0dGJOMmzrBMXFNnLWgsLNrYUP0BJOhZSjfFgYO3W82uUWnwgOmtkDCgyLo2HVN8WvTztFybmua0Yyh7AXY2dBhqAEF7wi8ABzpk2K4J9Un2ebigaLTSJkaQVPuuewpJTXjJ9dB1v2gxexly1VnMwv7uO1tec9KKPeXFOUCBvQL4B3BHyseH6V10VnITZ4s6CmUNMfL1T3Ld4hMDPVsWBGR=w400-h312-no) no-repeat left 6px center/ contain;
padding-left: 4em;
}
</style>
<style>
.claname01 {
border: 1px solid black;
padding: 5px;
margin-bottom: 3px;
}
.claname02 {
border: 1px solid black;
padding: 5px;
margin-bottom: 3px;
}
div[class*="01"]:hover {
background-color: lightgray;
}
div[class*="02"]:hover {
background-color: khaki;
}
</style>
<style>
.flex-container191115 {
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-top: 1px solid red;
padding-top: 2em;
}
.item191115 {
flex: 0 0 auto;
padding:0.5em 1em;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
margin: 5px;
transition: 0.3s;
font-size: 110%;
}
.item191115:hover {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: lightgray;
cursor: pointer;
margin: 5px 8px;
}
</style>
<br>
<br>
<br>
<br>
<big><span style="font-weight: bold; background-color: black; color: white;">DIV區塊概念 & css選擇器初步</span></big><br>
<div class="bigword20170618">數位文本的寫作基本觀念</div>
<div class="midword2017061802">想要寫好數位文本、搞定數位寫作;</div>
<div class="midword20170618">一定要建立起來的數位媒材基本運作方式。</div>
<br>
<div style="font-wieght: bold;">
<big><a href="http://lmcmultimedia.blogspot.com/2017/06/div.html" target="_blank">相關參考內容:把編輯元素用DIV包起來。 click to go!</a></big></div>
<br>
<br>
<br>
<div class="mainword2017061801"><img
style="width: 160px; height: 156px; border-radius: 45px; background-color: lightgray;" alt=""
src="https://lh3.googleusercontent.com/14RKbzK6VhW-VNRbWOpstq7eaxOQ68arUABMAUo-Zy-KgjqLaxUT4IeYReyj7LrDYZYbtQQ1E0By73u47N3YF0IyMvptjn4NRtN0LOMRZ-vpDTVE7VDTUiTPZbVsMnNgASbhCxM6PhU1kW7SXsc0NKSB4CBYtnVgfbDu9BoTeYSYnmBE_2_ldzNXx2ijfJ2TXZpc3YBYn-O8YEb43jvq8cNBTYQwny2BH_Ljbd5xONBP6lj82yztHO8lCplMH0XQFa_ai_Lk9lwkUtqIeA1bZYlFHjBBzOWIAZ56mvsND54jttDePqB9X9IAlw0QeYJtacTeBgd60f1aoB3Nfodsgx128XJ_uGGxNSDPtGOo8-mp11_IQ6hcaum6UsxacFfIKmeXgyNBO86YTwJkfQrbT4JTHkwRPf9EKLDUZ4yBczTaNzq6vNCil9xrYYVmI0uS1Ax_oLJzvTwnx-ExKFV693kS8iYsNblXWVVDV8vkoZFR66GNjBM2O3Mbi1t5O1C-LNuUh7JKm8QITLQx7BS3zfF-HZVB80bOZG1zTnlWv3aNGSxAcJ8zEPBHRsnWMPpvLpD_t8DOObyNSe41OMerU1T5VJZM7efmwFscpibzH0lYaDFT7NRE2A=w263-h257-no"
align="left" hspace="10">
對初學者而言,談DIV的特色,並沒有太大意義。<br>
在沒有寫作運用的經驗下,你無法想像那些所謂DIV的媒材特性;當然你更無法去想像為什麼要用DIV?如何使用DIV?<br><br>
<span class="hint--right hint--success hint--always hint--rounded" aria-label="為什麼一定要「學好」DIV呢?"> </span><br>
<br>
你先把以下三個常用的基本概念,暫時先「硬記」起來!<br>
<ol>
<li>DIV是區塊的,是block的空間概念。請看video。</li>
<li>通常,我們會把媒材,例如文字、圖像、影音…等等用DIV包 起來,再來處理DIV。</li>
<li>DIV非常適合用來處理版面空間移動和互動效果,所以被大量使用。</li>
</ol>
DIV是最方便用來寫作數位文本的媒材物件!elements!更重要的是,它是「區塊」媒材物件。<br>
再來是,如何選出你要的DIV呢?這就是選擇器要出馬的時候了。<br>
</div>
<br>
<br>
<div class="midword2017061803">1.DIV基本語法:</div>
<br>
<br>
<span style="color: red;"><div></span><br>
這是內容,可以是文字、圖像等等…。<br>
<span style="color: red;"></div></span><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">名詞使用/翻譯:</span><br>
<br>
<div class="claname01" width="400" style="border: 1px solid
red;">DIV內容媒材</div><br>
<br>
<element attribute="value" attribute="value" attribute ="property:
value;">DIV內容媒材</div><br>
<br>
<物件 屬性="屬性值" 屬性="屬性值" 屬性="參數: 參數值;">DIV內容媒材<結束碼〉<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
上面是常見的語法術語。英文和中文翻譯,我也都列在裡面。<br>
有幾個地方,可以多談一下。<br>
<br>
一、<br><br>
element,我譯為「物件」。一般常見的是「元素」。為什麼我譯為物件?我並不是「直譯」,而是依「功能」的概念來譯。這樣在上課的解釋說明時,可以
把想法表墶的更清楚。<br><br>
當我們把某些媒材,上例是幾個文字,用DIV包起來,是為什麼呢?為什要「多做」這些麻煩的寫作動作呢?<br><br>
那是因為,我們其實是想把「那個幾字」圈封在一起,來對之進行變化操作,如改顏色、移動位置等等。<br><br>
在這一思維過程中,那幾個字是被轉換為「物件」來思考,因為「人類」這種生物只能以「物件」的概念來思考「對象物」。這即是胡塞爾所談的「意向性」。<br><br>
羅伯.索科羅斯基談論意向性時說道:「每一個經驗活動,都是具有指向性的:意識總是『對於某事某物的意識』,經驗總是『對某事某物的經驗』」(羅伯.索科
羅斯基/李維羅譯,2004:24)。意向性,「標誌著所有意識的本已特色」(倪梁康,1999:249)。<br><br>
依此而論,當使用element時,是想對媒材進行某種操作,因之,element譯為「物件」,比傳統元素直譯,來得更為接近「寫作心理狀態」的描述。
從寫作/閱讀角度出發,而不是從「技術語法」出發,是我在思考數位文本理論,所持的立場(李明哲,2017)。這也反映在網路教案中。<br><br>
<br>
二、<br><br>
一個媒材物件內,可以有很多「屬性」,例如上述中calss、width等等。要注意的是:這些屬性是「同一位階的」。換言之,是和物件「平行的同一位
階」地對「物件」進行變化操作。<br><br>
這樣的理解很重要,因為以後使用css選擇器時,位階關係是選擇判斷上的重要依據。例如elemetn[attribute]/div[class=
"name"],是「屬性選擇器」,只能用屬性來選。<br><br>
那麼,style這個屬性就比較的不同了。<br><br>
例如 width="400“ 個屬性,只要下「屬性值」就好。但style="width:
300px;"這個屬性,卻有更多的操作變項,可以稱之為「參數:參數值」。<br><br>
因之,在教案內,一般而言,提到參數、參數值,往往是指style屬性。<br><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">注釋:</span><br>
<br>
羅伯.索科羅斯基/李維羅(2004)。《現象學十四講》。台北市:心靈工坊文化。<br>
倪梁康(1999)。《胡賽爾現象學概念通釋》。北京:新知三聯。<br>
李明哲(2017)。《能動敘事文本寫作的現象學分析》。台北市:五南。<br>
<br>
<br>
<br>
<div class="midword2017061803">2.DIV的block特性</div>
<br>
<br>
<div style="border: 1px solid red;">這是DIV和其內容。請看影音教學,了解什麼是block。</div>
這是後面的文字…<br>
<br>
<span style="font-weight: 800; text-decoration: underline; text-decoration-color: blue;">說明:</span><br><br>
DIV是區塊媒材物件,「區塊」是一種「空間的」概念。也就是說,只要你下了DIV指令(區塊物件),電腦就認為你「佔領了」一個「版面空間區域」,
如上例紅色框線內的版面空間區域,就被圍封起來了。<br><br>即使,DIV的版面空間,沒有填滿內容,那也不怎麼樣,反正電腦認為,那一塊版面空間已被圍封起來了,
不能再被DIV以外的媒材來佔領使用。<br><br>
<br>
<span style="text-decoration: underline; font-weight: bold;">舉例:</span><br>
<br>
DIV前面的文字<br>
<div id="diexaar20171029">
<div
style="border: 1px solid red; margin: auto; width: 243px; height: 81px; background-color: peachpuff;">DIV
裡面的文字。<br>
</div>
</div>
DIV後面的文字<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
我們可以看到,即使DIV(區塊物件)設置了某些屬性,例如寬、高,同時又是區塊居中。裡面的文字也只有幾個。<br><br>
但,那又怎麼樣?電腦反正認為,那一個「版
面空間」已經是被圍封了(mouseover ↑,綠線區),被佔領了。DIV之外的其他媒材再也不能使用了。<br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zRmZg4pROdw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
<br>
那麼,區塊媒材物件到底有那些呢?<a href="https://www.w3schools.com/html/html_blocks.asp" target="_blank">請看這裡,w3schools.com最權威的整理</a>。<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRxQia5aUozMZTT7nlO0Llaqw6V_DO2HJ4YobbukzbyZLiJJpSYFPJlE5TT9jJeiUasMGhTQzPAHZbSs6jhhlIQEdBZhMLJ0RzoZdQzUinNUZMZNjGEksNpRHCn9uBxTU5c9VpamDcTrE/w1035-h244-no/" style="width: 576px; padding: 0px; border-width: 0px;"><br>
<br>
<br>
<br>
<div class="midword2017061803">3.DIV可將媒材打包起來之運用</div>
<br>
<br>
<div style="border: 1px dotted darkred; width: 142px;"
id="movtran20170619">
這是我的新書。<br>
<img style="width: 141px; height: 190px; margin: 0px; padding:0px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02k3cgQn36E50EpB0mx1s8HB_jzKMcECpytBxD9FajkacjyqNfeQ6jm5ZDsuNMNjlMuohCGIxeAq8u-BJ0_3lOpa1gh_gMHYlwdvMj-N6uz7JrKNwRBfLInVk4w19cyjTj5ZSDrxcmyE/w553-h741-no/"><br>
</div>
<br>
<br>
<br>
<div class="midword2017061803">使用DIV的互動效果,</div>
<br>
<br>
<span
onclick="$('#movtran20170619').queue(function() {
$( this ).addClass('divmove20170619').dequeue();}).delay(3000).animate({ 'opacity': '1' }, 1000 ).queue(function() {
$( this ).removeClass('divmove20170619').dequeue();});"
class="spanbor20170619">一、媒材可以一起打包位置移動(click)</span> ; <span
onclick="$('.test0120170619').slideToggle(800);"
class="spanbor20170619">二、流暢的互動效果(click)</span>。 <br>
<br>
<br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 290px;"><span
style="text-decoration: underline; font-weight: bold;">單純照片</span>(醜)<br>
</td>
<td style="vertical-align: top;"><span
style="text-decoration: underline; font-weight: bold;">有加上div的照片</span>(流
暢)<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; height: 220px;"><br>
<img style="width: 260px; padding: 0px; margin: 0px;" class="test0120170619"
alt=""
src="https://c1.staticflickr.com/5/4204/35214908982_03302715d1_b.jpg"><br>
</td>
<td style="vertical-align: top;"><br>
<div style="border: 1px solid darkred; " class="test0120170619"><img
style="width: 260px; padding: 0px; margin: 0px;" alt=""
src="https://c1.staticflickr.com/5/4204/35214908982_03302715d1_b.jpg"></div>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="midword2017061803">影音教學:</div>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8c0IOWGGE0A?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br><br>
<div class="divword20171006a">精準控制DIV位置關係的寫作技能</div>
<br>
<br>
<div class="divword20171006b">
方法一:<a href="http://lmcmultimedia.blogspot.tw/2013/07/div-css.html"
target="_blank">輕鬆使喚DIV:邊框、背景色、padding(留白)、margin(外距)</a>!<br>
方法二:<a href="http://lmcmultimedia.blogspot.tw/2015/05/div.html"
target="_blank">輕鬆控制DIV:靠左、置中、靠右、上移、下移!</a><br>
方法三:<a
href="http://lmcmultimedia.blogspot.tw/2017/07/divrelative-absolute-translate-z-index.html"
target="_blank">自由移動 DIV:relative, absolute, translate, z-index。</a><br>
方法四:<a href="http://lmcmultimedia.blogspot.tw/2013/11/css_19.html"
target="_blank">DIV排版寫作的堆積木法。</a><br>
</div>
<br><br>
<br>
<div class="viewdis">區塊位置 VS 內容位置(一定要了解 )<span style="color: red;">▽</span>
Click! <span style="color: red;">▽</span></div>
<br>
<br>
<div class="divspan1102">
<big
onclick="$('#span110202').empty().append('margin-left: 0px;').css('color', 'red'); $('#samdivspan').css({'margin-left': '0px'})">區
塊靠左</big> <big
onclick="$('#span110202').empty().append('margin: auto;').css('color', 'red'); $('#samdivspan').css({'margin': 'auto'})">區
塊居中</big> <big
onclick="$('#span110202').empty().append('margin-left: auto; mrgin-right: 0px;').css('color', 'red'); $('#samdivspan').css({'margin-left': 'auto', 'margin-right': '0px'})">區
塊靠右</big><br>
<hr style="width: 100%; height: 2px;"><big
onclick="$('#span110204').empty().append('text-align: left;').css('color', 'blue'); $('#samdivspan').css('text-align', 'left')">內
容靠左</big> <big
onclick="$('#span110204').empty().append('text-align: center;').css('color', 'blue'); $('#samdivspan').css('text-align', 'center')">內
容居中</big> <big
onclick="$('#span110204').empty().append('text-align: right;').css('color', 'blue'); $('#samdivspan').css('text-align', 'right')">內
容靠右</big><br>
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">HTML語法; </span><br>
<br>
<div style="border-bottom: 1px solid silver; height: 90px;">
<div style="border: 1px solid red; <span id="span110202">margin:
left;</span>
<span id="span110204">text-align: left;</span>"><br>
這是內容,可以是文字、影像和影音。<br><br>
</div><br>
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">效果呈現:</span><br>
<br>
<div id="samdivspan"
style="border: 1px solid red; width: 80%; text-align: left;">
這是內容,可以是文字、影像和影音。<br>
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
<span style="text-decoration: underline;">區塊靠左、內容靠左</span>,是預設值。可以不再寫出來,
就會有的效果。<br>
<br><br><br>
<div class="divword20171006a">
控制DIV裡面文字(/媒材)的靠齊位置:靠左、居中、靠右<br></div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">CSS語法:</span><br>
<br>
style=" text-align: center; " //
left, center, right; 靠左、居中、靠右<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">HTML範例:</span><br>
<br>
<div style="<span style="color: red;">text-align: center;</span>
border: 1px solid gray;">這是內容文字。</div><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">呈現:</span><br>
<br>
<div style="border: 1px solid gray; text-align: center;">這是內容文字。</div>
<br><br><br>
<div class="divword20171006a">改變DIV的外貌:寬高、邊框、陰影、圓角、傾斜<br></div>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*寬、高*/</span><br>
<br>
style="width: 200px; height: 200px;"<br>
<br>
說明:通常只寫寬度,高度讓內容決定<br>
<br>
<br>
<span style="font-weight: bold;">/*DIV內容位置*/</span><br>
<br>
style="text-align: left;"<br>
<br>
說明:text-align: center; //left, center, right,內文居左、中、右。<br>
<br>
<br>
<span style="font-weight: bold;">/*DIV本身居中*/</span><br>
<br>
style="margin: auto;"<br>
<br>
說明:寬度要小於編輯區域才有用。<br>
<br>
<br>
<span style="font-weight: bold;">/*DIV本身靠右*/</span><br>
<br>
style="margin-left: auto; margin-right: 0px;"<br>
<br>
說明:兩者要一起寫。Xpx是與右邊界距離。<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*留白(內邊距)*/</span><br>
<br>
style="padding: 1em;"<br>
<br>
說明:也可以單獨控制四個邊,padding-left: xxx; //left, top, bottom, right。'em'是「一個字寬度」。<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*外邊距*/</span><br>
<br>
style="margin: 1em;"<br>
<br>
說明:也可以單獨控制四個邊,margin-left: xxx; //left, top, bottom, right<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*邊框*/</span><br>
<br>
style="border: 1px solid gray;"<br>
<br>
說明:也可以單獨控制四個邊,border-left: xxx; //left, top, bottom, right<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*陰影*/</span><br>
<br>
style="box-shadow: 2px 2px 5px silver;" <br>
<br>
說明:x, y, blur, color<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*圓角*/</span><br>
<br>
style="border-radius: 25px;"<br>
<br>
說明:25px是圓化的比例<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*傾斜*/</span><br>
<br>
style="transform: rotate(-3deg);"<br>
<br>
說明:-3deg是指斜度,可以是正、負值<br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">/*背景色*/</span><br>
<br>
style="background-color: #FFED97;"<br>
<br>
說明:可以使用顏色代碼表或顏色名字,<a href="https://www.ifreesite.com/color/" target="_blank">click here!</a><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">CSS的合併使用</span><br>
<br>
<style><br>
.divchange {<br>
box-shadow: 2px 2px 5px silver;<br>
border-radius: 25px;<br>
transform: rotate(-3deg);<br>
background-color: #FFED97;<br>
}<br>
</style><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">呈現:</span><br>
<br>
<div style="height: 102px; width: 208px;" class="divchange20171010">對DIV
外貌加以變化<br>
</div>
<br>
<br>
<br>
<br>
<hr style="width: 100%; height: 2px;"><br>
<br>
<div class="divbacimg2017103101">CSS選擇器的初步基礎觀念及操作</div>
<br>
什麼是CSS選擇器?講了你也不會懂。只有在你有某種數位文本寫作操作的經驗之後,你才有可能「用那些經驗」,來「理解」我所要表達的。<br>
<br>
「操作經驗」,真的很重要,不然你聽不下去,看不下去,這網頁教案了。<br>
<br>
選擇器的使用,就是要你能具備一種能力,這種能力就是你可以隨心所欲的去「掌握」數位文本中,任何一個媒材物件。掌握了你想要控制的媒材物件,就可以對之進行變化操作或互動設置。<br>
<br>
其實,「讀書」也是如此的人性經驗結構;要先有某些「背景知識」,你上某些「深一點的課」時,才有可能聽懂。來,如果你是讀傳播的,我介紹你讀一些<a
href="https://www.youtube.com/watch?v=mQigFHzkuVU&index=10&t=3s&list=PLYSkC12jw65-5UjagR7JwJeNmvGyhYmSE"
target="_blank">非常重要的背景知識的書,請看</a>。<br>
<br>
<br>
好,來,如果你上課上到這裡,應有能力看懂 下面<span
style="text-decoration: underline; font-weight: bold;">語法範例解說</span>。<br>
<br>
<style><br>
<br>
.classname01 {<br>
border: 1px solid red;<br>
}<br>
<br>
/*<br>
這是指所有的、有著class="classname01"的媒材物件,不管是DIV、IMG、Table等等,都會受到這個class的設定內而被作
用。<br>
*/<br>
<br>
#idname01 {<br>
border: 1px solid red;<br>
}<br>
<br>
/*<br>
同樣的,這是指所有的、帶著id="idname01"屬性的媒材物件,不管是DIV、IMG、Table等等,全部都會受到這個id的設定內而被作用。
class、id這兩個是之前教過的,常用的。<br>
*/<br>
<br>
div {<br>
border: 1px solid red;<br>
}<br>
<br>
img {<br>
border: 1px solid red;<br>
}<br>
<br>
span {<br>
border: 1px solid red;<br>
}<br>
<br>
/*<br>
第一個,這是指所有的DIV編輯物,全部都會受到參數設定內容而被作用。不只是DIV,任何編輯物都可以如此設定。例如
span、table、img等,如上例。<br>
*/<br>
<br>
<span style="font-weight: bold;">【過瀘作用】</span><br>
div.classname02 {<br>
border: 1px solid red;<br>
}<br>
<br>
/*<br>
有時,為了快速,媒材物件和class可以合併書寫使用,如上例。這是指,所有有著class="classname02"的DIV,都會被參數所作用。
其他的媒材物件也可以,例如,table.classname03 {xxx} 。這其實有著過濾作用。<br>
*/<br>
<br>
<span style="font-weight: bold;">【合併作用】</span><br>
div, img, span {<br>
border: 1px solid red;<br>
}<br>
<br>
/*<br>
這是指合併數個媒材物件,都同樣作用於相同某種參數。此例,div、img、sapn都被作用了,你也可以再加其他媒材物件。中間用「,」(半型字元)隔
開。<br>
*/<br>
<br>
</style><br>
<br>
<br>
再來,一個媒材物件可以使用多個class,如下例<span
style="text-decoration: underline; font-weight: bold;">語法</span>:<br>
<br>
<div class="claname01 claname02 claname03">content</div><br>
<br>
如果,不同的class有相同的參數,例如claname01和claname03都有顏色參數,那麼以「後面的」為準,即claname03為勝出。<br>
<br>
<br>
<br>
<big
style="border-left: 5px solid darkred; border-right: 5px solid darkred; padding: 0px 5px; font-weight: 600;">可以有聰明選擇作用的「過瀘效果」:</big><br>
<br>
在作互動寫作過程,一定是需要大量的「選擇過程」,選擇那個物件要被互動。因此,好的選擇方式來正確「命中」物件元素,就是要去練習的寫作技能。<br>
<br>
在這裡,我們介紹一個常用的,很好用的方式:屬性選擇器之「*」效果。那是有符合「某字串」,就可以被選擇出來的過濾作用。<br>
<br>
<big>物件[屬性*="文字"]<br>
<br>
div[class*="01"]:hover {<br>
xxx<br>
}</big><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">CSS範例:</span><br>
<br>
<style><br>
.claname01 {<br>
border: 1px solid black;<br>
padding: 5px;<br>
margin-bottom: 3px;<br>
}<br>
<br>
.claname02 {<br>
border: 1px solid black;<br>
padding: 5px;<br>
margin-bottom: 3px;<br>
}<br>
<br>
div[class*="01"]:hover {<br>
background-color: lightgray;<br>
}<br>
<br>
div[class*="02"]:hover {<br>
background-color: khaki;<br>
}<br>
</style><br>
<br>
<br>
<span style="font-weight: bold; text-decoration: underline;">HTML語法:</span><br>
<br>
<div class="claname01"><br>
This is a test with classname including "01".<br><br>
</div><br>
<div class="claname02"><br>
This is a test with classname including "02".<br><br>
</div><br>
<div class="claname01"><br>
This is a test with classname including "01".<br><br>
</div><br>
<div class="claname02"><br>
This is a test with classname including "02".<br><br>
</div><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">效果呈現:</span><br>
<br>
<div class="claname01">This is a test with the classname including "01".<br>
</div>
<div class="claname02">
This is a test with the classname including "02".<br>
</div>
<div class="claname01">
This is a test with the classname including "01".<br>
</div>
<div class="claname02">
This is a test with the classname including "02".<br>
</div>
<br>
<div><span
style="border: 1px solid lightgreen; padding: 3px; margin-left: 400px; text-decoration: underline;">please
hover!! ⇖</span><br>
</div>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">說明:</span><br>
<br>
藉由添加「01」、「02」的字串,而形成某種「規律性」,在此是單、偶數列的規律性,就可以形成某種規律選擇性的聰明效果。<br>
<br>
<br>
<br>
<img style="height: 120px;" src="https://lh3.googleusercontent.com/LmqeBOt9vRVt4kE5--kXOyC2tnfSjlcV5O1DzyS9tZysPJIj6QgmE7qmuOdnfUA-vDRdV9uu1odX9w7jIyJ811OTdnk8swScvDewylZzkcZXIH3XOdsRqMzLTvoBvCfaYhUd0b7NZU6cua5HdrDhdP5-OMTNCN0pdxn8D0HZQt8JH35GrYnMlJ7y7fQk84R4AODfuPpdZnkFFcWT1rc4qS8SZGQ5_vicDDYYxKo7asuKpYesVmkuRh3lxNSBJzHpu6QWbI62Lc4pyaWoXTCYuB9FlGjGFmzSdnqYuHQzjOY_jhItKBXffTslNsbuzfRxAOZpCH3b34TKjrT0PZ_tbj44NFiig6kpj6AP0zIQiqblthok8f05DF3Zp16B3CyyLTR9Uf7VuSUNwAcntMxCLEbefhPfgS1wGNMEfhdvtBc_h3u1nrYu49-njGdE5Vm-oCqBoN6hYdmj3lcAjmhT0yajAWsS7a98v0AByC6KqQRJNCD5i2na13206HBue9dEKODMpe2IxR31ofauV2faKQpm4WfjgHMag_Nv1gmG3XQ2dk4MjQkXBxmPYX0spp6PuO1dGS91ogwKwNbZTOUwmlZh--UdPO2rZ2-5B2lT9TKw9fr6gMkpY_fnj4zFgV-2QjlQqhKFItGVdDfn7I_kaLj5_Zg0VPHIJMilz-_-g-qjxK0eSdHTYbK2YMb6c2TDhSwX_6TMSN63HpEI5kOsgOWMY74sn25lEScBVfpkt5FtedZRRg=s512-no"><span style="font-size: 120%; font-weight: bold; vertical-align: 2em; text-decoration: underline; vertical-align: top;">舉例說明 // 精彩範例:</span><br><br>
對比:<br>
警察常用電擊槍:<a href="https://kknews.cc/zh-tw/news/lk89592.html
" target="_blank">平面新聞</a> VS <a href="http://fingfx.thomsonreuters.com/gfx/rngs/USA-TASER/0100503J07X/index.html
" target="_blank">互動新聞</a><br><br>
如何幫助我們可以有什麼樣的更好理解可能:<a href="http://fingfx.thomsonreuters.com/gfx/rngs/THAILAND-ACCIDENT-CAVE/0100711G258/index.html">Lucky 13</a><br>
讓人可以更多去理解的作品:<a href="https://www.cbc.ca/news2/interactives/solar-flares/">When the sun erupts</a><br><br>
讓人可以更多去理解的作品:<a href="https://www.theguardian.com/environment/ng-interactive/2019/may/17/air-pollution-may-be-damaging-every-organ-and-cell-in-the-body-finds-global-review">Revealed: air pollution may be damaging ‘every organ in the body’</a><br><br>
經典作品:<a href="http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek">snow fall</a>
<br>
<br>more… more…
<div class="flex-container191115">
<div class="item191115"><a href="http://species-in-pieces.com/" target="_blank">species-in-pieces</a></div>
<div class="item191115"><a href="http://www.drawastickman.com/episode1" target="_blank">Draw a stickman</a></div>
<div class="item191115"><a href="https://interaktiv.morgenpost.de/laermkarte-berlin/" target="_blank">Lärmkarte Berlin</a></div>
<div class="item191115"><a href="https://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/?fbclid=IwAR1jvIK2aZkdtT7C1w5LzYb614l8DBTDSn7ehDpmeHE5dQ7X3XB2wpzUKpc" target="_blank">Kick my habits</a></div>
<div class="item191115"><a href="http://polishchristmasguide.com/" target="_blank">polishchristmasguide</a></div>
<div class="item191115"><a href="https://graphics.reuters.com/INDIA-RIVER/010081TW39P/index.html" target="_blank">The race to save the river Ganges</a></div>
<div class="item191115"><a href="https://www.washingtonpost.com/graphics/national/drought-in-southwest/" target="_blank">How dry is California?</a></div>
<div class="item191115"><a href="https://www.theguardian.com/us-news/ng-interactive/2016/may/14/who-supports-donald-trump-the-new-republican-center-of-gravity" target="_blank">The new Republican center of gravity</a></div>
</div>
<br>
<br>
<br>
M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-26511704031811899542017-06-12T15:46:00.001+08:002017-07-29T12:59:22.743+08:00DIV資訊溢出框外的表現形態: overflow <style>
#overf060201 >tbody >tr:nth-of-type(2) >td:nth-of-type(2) >div:hover {
overflow: hidden;
}
.overhidden0605 {
overflow: hidden;
}
.overhidden060502 {
overflow: scroll;
overflow-x: hidden;
}
.overhidden060503 {
overflow: scroll;
}
.overflani20170601 {
overflow: hidden;
background-image: url(https://c1.staticflickr.com/5/4274/35008151376_0c7414dce5_k.jpg);
background-repeat: no-repeat;
background-position: left -400px top -160px;
background-size: 1024px;
transition: 1s;
}
.overflani20170601:hover {
background-repeat: no-repeat;
background-position: left top;
background-size: 420px;
}
.divtran20170607 {
padding-left: 1em;
transform: translateX(240px);
transition: 2s;
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.06em;
background-color: lightgray;
}
.overflani20170601:hover >div {
transform: translateX(0px);
}
.divword0612 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.06em;
text-decoration: underline;
text-decoration-style: wavy;
}
.text-shadow0612{ text-shadow:1px 1px 2px #2c5103; color:#60ad0d;
font-family: Verdana, '微軟正黑體';
font-size: 1.7em;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.06em;
}
.text-shadow0612 >span[onclick] {
border-bottom: 1px solid black;
}
.text-shadow0612 >span[onclick]:hover {
border-bottom: 1px solid red;
cursor: pointer;
}
.spanword20170729a {
display: inline-block;
font-size: 2.5em;
}
.spanword20170729b {
display: inline-block;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
<br>
<br>
<br>
<div class="text-shadow0612"> <span class="spanword20170729a">DIV</span><span class="spanword20170729b ">資訊溢出框外</span>的表現形態:<br>
overflow: <span onclick="$('html, body').animate({
scrollTop: $('#t20170729a').offset().top
}, 1000);">visible</span> | <span onclick="$('html, body').animate({
scrollTop: $('#t20170729b').offset().top
}, 1000);">hidden</span> | <span onclick="$('html, body').animate({
scrollTop: $('#t20170729c').offset().top
}, 1000);">scroll</span> | auto ;</div>
<br>
<span style="font-weight: bold;">如果一個DIV的長度和寬都被設定好了</span>,但裡面的內容資料超出了這一個DIV長寬。<br>
那麼,超出的部分資料,會如何呢?基本的預設值是 visible:會超出去DIV的長寬。<br>
……<br>同樣的概念和技法,同樣也可以應用到表格的TD。<br>
<br><br>
<span id="t20170729a" class="divword0612">下面Div設置了長寬各100px; css 預設值 overflow:visible</span><br>
<br>
<table id="overf060201" style="width: 100%" border="1">
<tbody>
<tr>
<td style="width: 281px; background-color: white;">文字超溢</td>
<td>圖像超溢</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: top; background-color: white;">
<div style="width: 100px; height: 100px; border:1px solid darkred;">dsfkl
ds fd<br>
dslf dlsf dl fld fl dlf dslf klds fld sfldjlf jdslf jdls
jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df
dlk d f fdklf djfi</div>
<span style="color: red;">123 456 789 11 12 13 14 15</span><br>
<br>
</td>
<td style="text-align: left; vertical-align: top; background-color: white;">
<div style="width: 100px; height: 100px; border:1px solid darkred;">
<img style="width: 105px; height: 127px; margin: 0px; padding: 0px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02k3cgQn36E50EpB0mx1s8HB_jzKMcECpytBxD9FajkacjyqNfeQ6jm5ZDsuNMNjlMuohCGIxeAq8u-BJ0_3lOpa1gh_gMHYlwdvMj-N6uz7JrKNwRBfLInVk4w19cyjTj5ZSDrxcmyE/w553-h741-no/">
</div>
<span style="color: red;">123 456 789 11 12 13 14 15</span> <br>
<br>
請移到圖像 ↑<br>
</td>
</tr>
</tbody>
</table>
<br>
<b><u>說明:</u></b><br>
當DIV的長度和寬度被設定後,超出的資料會被看到(visible),這是預設值。但,請注意,對電腦而言,這DIV所佔據的版面大小,仍然只是100px x
100px。<br>
所以,DIV下方的紅字,仍然會出現,而且壓著溢出的資料。因為預設計是下方的資料會壓著上方的資料。<br>
<br><br><br>
<span id="t20170729b" class="divword0612">使用css功能 overflow: hidden;</span><br>
<br>
<table style="width: 100%" border="1">
<tbody>
<tr>
<td style="width: 281px; background-color: white;">文字超溢</td>
<td>圖像超溢</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: top; background-color: white;">
<div class="overhidden0605" style="width: 100px; height: 100px; border:1px solid darkred;">dsfkl
ds fd<br>
dslf dlsf dl fld fl dlf dslf klds fld sfldjlf jdslf jdls
jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df
dlk d f fdklf djfi</div>
<span style="color: red;">123 456 789 11 12 13 14 15</span><br>
<br>
</td>
<td style="text-align: left; vertical-align: top; background-color: white;">
<div class="overhidden0605" style="width: 100px; height: 100px; border:1px solid darkred;">
<img style="width: 105px; height: 127px; margin: 0px; padding: 0px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02k3cgQn36E50EpB0mx1s8HB_jzKMcECpytBxD9FajkacjyqNfeQ6jm5ZDsuNMNjlMuohCGIxeAq8u-BJ0_3lOpa1gh_gMHYlwdvMj-N6uz7JrKNwRBfLInVk4w19cyjTj5ZSDrxcmyE/w553-h741-no/">
</div>
<span style="color: red;">123 456 789 11 12 13 14 15</span> <br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br><br>
<span id="t20170729c" class="divword0612">使用css功能 overflow: scroll; 的諸效果</span><br>
<br>
<table style="width: 100%" border="1">
<tbody>
<tr>
<td style="width: 281px; background-color: white;">文字超溢
overlfow: scroll; overflow-x: hidden;</td>
<td>圖像超溢 overflow: scroll;</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: top; background-color: white;">
<div class="overhidden060502" style="width: 100px; height: 100px; border:1px solid darkred;">dsfkl
ds fd<br>
dslf dlsf dl fld fl dlf dslf klds fld sfldjlf jdslf jdls
jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df
dlk d f fdklf djfi</div>
<span style="color: red;">123 456 789 11 12 13 14 15</span><br>
<br>
</td>
<td style="text-align: left; vertical-align: top; background-color: white;">
<div class="overhidden060503" style="width: 100px; height: 100px; border:1px solid darkred;">
<img style="width: 105px; height: 127px; margin: 0px; padding: 0px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02k3cgQn36E50EpB0mx1s8HB_jzKMcECpytBxD9FajkacjyqNfeQ6jm5ZDsuNMNjlMuohCGIxeAq8u-BJ0_3lOpa1gh_gMHYlwdvMj-N6uz7JrKNwRBfLInVk4w19cyjTj5ZSDrxcmyE/w553-h741-no/">
</div>
<span style="color: red;">123 456 789 11 12 13 14 15</span> <br>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<i><b><u> 再來,</u></b></i> overflow: auto;
是指會內容的大小,而自動言調整。如果你填的內容,有超出被設定的長、寬度,那麼 scroll 就會自動啟動。<br>
<br>
<br>
<span class="divword0612">使用 overflow 來設定互動文本的範例:↙</span><br>
<br>
<div class="overflani20170601" style="border: 1px solid darkred; width:420px; height: 280px;"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="divtran20170607" style="margin-left: 12em;">書桌上的午餐</div>
<br>
</div>
<br>
<span class="divword0612">思考方向:</span><br>
<br>
「書桌上的午餐」是一個DIV。把它移到最上層的DIV外面;因為使用overflow: hidden;
所以會看不到。然後,利用互動,使它移回到上層DIV內,就又可以看到了。<br>
照片的變化是利用背景圖的作用。<br>
<br>
<b><u>CSS語法:</u></b><br>
<br>
<style><br>
.overflani20170601 {<br>
<span style="color: red;">overflow: hidden;</span><br>
background-image:
url(https://c1.staticflickr.com/5/4274/35008151376_0c7414dce5_k.jpg);<br>
background-repeat: no-repeat;<br>
background-position: left -400px top -160px;<br>
background-size: 1024px;<br>
transition: 1s;<br>
}<br>
<br>
.overflani20170601:hover {<br>
background-repeat: no-repeat;<br>
background-position: left top;<br>
background-size: 420px;<br>
}<br>
<br>
.divtran20170607 {<br>
padding-left: 1em;<br>
<span style="color: red;">transform: translateX(240px);</span><br>
transition: 2s;<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.2em;<br>
font-weight: bold;<br>
line-height: 1.6;<br>
letter-spacing: 0.06em;<br>
background-color: lightgray;<br>
}<br>
<br>
.overflani20170601:hover >div {<br>
transform: translateX(0px);<br>
}<br>
<br>
</style><br>
<br>
<br>
影音教學:<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AQGTDJqvIwc?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com2tag:blogger.com,1999:blog-4179719354980918481.post-43438975272484454502017-04-07T22:05:00.001+08:002017-08-03T11:49:08.139+08:00 文繞圖的方法:CSS: float<style>
.floatneed {
float: left;
}
.floatneeda {
float: none;
}
.divfloat20170405 {
width: 220px;
height: 160px;
border: 1px solid darkred;
cursor: pointer;
margin-right: 1em;
margin-bottom: 0.5em;
}
.divmouseover:hover {
background-color: lightgray;
cursor: pointer;
}
.divbacimg01 {
background-image: url(https://lh3.googleusercontent.com/nN1mATdO2Vvb9oeBicjRgE6yFHxV64-GW62xu12xht2CHsyvouZokWgNZsitYIFtffJF9jXZHPTduBqqQ65h-ejFTDK8qguIvGHovOmi8W1xepYvo0PTriJcBn_GCrL43yV7ss7JTVw0PROXYrDGwZ1wmv2_5SzxD_vQZgW0m1KljwMkKgFNrXQLsW9q62meUhAO2xlqkoC33Ew2utRIBC51NjtP3-K5FMgjagSKu-4FNnFdSc_aKsWJdXux_Y1SqpxbCea7F-bKZvHKFQBPel7LEIVbLYpBOu9gUIJ_q4VDjgIrrJtmZeP7oXYJqyO36-WLL2_KxIzEoCCq3Hh9J6LPDKNtqUbi7WK_6vgM_F4u5wstW3nv8jpyyN32KxqFg9EqvX4GqtWPYaVf3DklPhdCEYFCKq9eOhZEr83D7Yo0812YcQApTubqvG7TtLFeVNZR0B-KBZkvS6MSPFmN2Ublh1Mz0kYiIl4gPNmSaVVyoiVYLXwKgfRAe2sKOuS-ysrWUDGW6Gle57fy2Z9D2IcEja_kBz9PdrXdEYjCkNyKPKim7CF-44RI2_OgWkEzv0bYy4aLbAele3VxprK6AeJnA6XPYri6rOqplV4jevI3ElE21r56Qw=w381-h96-no);
background-repeat: no-repeat;
background-position: right center;
}
.divbacimg02 {
background-image: none;transition: 2s 1s;
}
.bigword0405
{
font-size: 3em;
font-family: '微軟正黑體';
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444;
}
.bigword040502
{
font-size: 1.3em;
font-family: '微軟正黑體';
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444;
}
.divrela01 {
border: 1px solid transparent;
overflow: hidden;
width: 300px;height: 2em;
box-sizing: border-box;
padding-left: 300px;
transition: 2s;
}
.divrela02 {
padding-left: 0px;
}
.clearboth {
clear: none;
}
.clearbotha01 {
clear: both;
}
.floatneed20170729a {
float: left;
box-shadow: 2px 4px 2px 3px silver;
}
</style>
<br>
<br>
<br>
<div class="bigword0405"> 文繞圖的方法:CSS: float</div>
<br>
<br>
<style><br>
.floatneed {<br>
float: left;<br>
}<br>
</style><br>
<br>
<b><u><span style="text-decoration: overline; font-size: large; letter-spacing: 0.15em;">把
上方的class加到圖像裡去,那麼就可以有「文繞圖」的排版效果出來。</span></u></b><br>
<img <span style="color: #cc0000;">class="floatneed"</span>
style="width: 324px; height: 216px; margin-right: 1.5em;"
src="https://c1.staticflickr.com/4/3758/33372767845_45b69fa2d8_b.jpg"><br>
如下例:<br>
<br>
<div id="wf040502" class="divrela01" style="font-family: "微軟正黑體"; font-size: large; font-weight: bold; text-decoration: underline; color: #cc0000; position: relative; top: 120px; left: 360px;">
<沒有float的效果;無文繞圖</div>
<div id="thisid01"> <img class="floatneed" style="width: 324px; height: 216px; margin-right: 1.5em;"
alt="" src="https://c1.staticflickr.com/4/3758/33372767845_45b69fa2d8_b.jpg">這
是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文
字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這
是文字這是文字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這
是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字。</div>
<div> </div>
<hr><br>
<div class="bigword040502"> 這有什麼了不起的嗎? 有。</div>
<br>
<div class="divmouseover" onclick="$('#thisid01 >img').toggleClass('floatneeda'); $('#wf040502').toggleClass('divrela02');">
一、就網頁文本的區塊寫作技巧原則而言,這是可以把照片右邊的「空白區」填滿文字(或其它媒材)的方法。亦即CSS: float 語法的效果。 <span
style="color: #cc0000; text-decoration: underline;">click here!</span></div>
<br>
二、在之前所常用的區塊寫作技巧中,Div以及表格(table),都是具有block的特質,亦即會「限死」區塊中沒有被使用到的空 白。<br>
換言之,「區塊」中的空 白,是無法直接被使用。而以前教的解決方法是,div或表格「堆積木法」。現在我們可以使用float這一語法,如下:<br>
<br>
<div class="divbacimg01">
<div onclick="$(this).toggleClass('floatneed20170729a').parents().toggleClass('divbacimg02');" class="divfloat20170405">這是div內的文字。<br>
width: 220px;<br>
height: 160px;<br>
border: 1px solid darkred;<br>
<b>按此,DIV變float功能!下方文字就擠進右方空白處來了。/再按:復原</b>
</div>
</div>
DIV後要再增加的文字會被移到下面來(目前即是此例)。也就是說div(區塊模式)右邊的空白處,是無法被使用的。<br>
<br>
三、一旦對DIV進行float的設定(請按上例),可以看到,DIV右邊空白處,即成為可被其他媒材(文字)來填滿的地方。原本DIV下方的文字,就自動擠進去空白處。<br>
<br>
四、要停上對空白處的「填滿」,請下此指令 <br clear="both"> 。如要讓圖靠右讓文字填在左邊空白,使用 float:
right 。<br>
<br>
五、div 、table等 block的寫作元素,都可以使用此一技巧,讓文字填滿「空白處」。<br>
<br>
<u><b>範例:</b></u><br>
<div style="width: 520px; height: 120px; border: 1px solid darkred; <span
style="color: #cc0000;">float: right;</span> margin-left: 5px;"><br>
這是一個div。<br>
</div><br>
這是文字這是文字<span style="color: #cc0000;"><br></span>這是文字…<br>
<br>
<div id="a040501"> <b><u>呈現:</u></b><br>
<div style="width: 520px; height: 126px; border: 1px solid darkred; float: right; margin-left: 5px; padding-left: 5px;">
這是一個向右float的 div。<br>
我們將看到,加入<br clear="all">之後,就停止對空白的填滿,而直接回復block的狀態,亦即空白處不再被使用。<br>
<span onclick="$('#a040501 > br:last').toggleClass('clearbotha01');" style="background-color: silver; cursor: pointer;">按
這裡加入 clear="all",click here!</span></div>
這是文字這是文字<br class="clearboth">
這是文字這是文字這是文字這是文字這是文字這是文字這是文字。</div>
<br>
<br>
教學影音:<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/va9eQWi-A7s?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-24468056244289353502017-01-14T22:52:00.000+08:002017-01-14T23:14:11.184+08:00滑鼠移入後,小圖變大圖<style>
.bigtitle17011401 {
font-family: Verdana, '微軟正黑體';
font-size: 3.1em;
font-weight: bold;
line-height: 1.2;
text-align: left;
letter-spacing: 0.05em;
text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}
.midtitle17011402 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: bold;
line-height: 2.4;
letter-spacing: 0.03em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
border-top: 1px solid red;
}
.midtitle17011402:hover >span {
display: inline-block;
transform: translate(15px, 24px);
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 0.6s linear;
}
.div0001 {
overflow: hidden;
float: left;
margin-right: 20px;
margin-bottom: 12px;
}
.div0001 >img {
width: 1024px;
transform: translate(-270px, -330px);
}
.div0001:hover {
overflow:visible;
}
.div0001:hover >img {
transform: translate(0px, 0px);
width: 576px;
opacity: 0;
-webkit-animation: myanim16122001 1s 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@-webkit-keyframes myanim16122001 {
0% {opacity: 0;}
5% {opacity: 0;}
100% {opacity: 1;}
}
/* 中標 */
.midtitle17011401 {
font-family: Verdana, '微軟正黑體';
font-size: 1.37em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 0.5em;
}
/* 基本黑體內文 */
.ironcontent17011401 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: normal;
line-height: 1.87;
text-align: left;
letter-spacing: 0.08em;
}
</style>
<br>
<br>
<div class="bigtitle17011401">滑鼠移入後,小圖變大圖</div>
<div class="midtitle17011402">CSS綜合練習:<span>float; overflow; transform;
animation</span></div>
<br><br>
<br>
<br>
<br>
<div>mouseover the picture to expand!</div>
<div style="width: 410px; height: 240px;" class="div0001"><img
class="img001" alt=""
src="https://c7.staticflickr.com/6/5581/31177245550_6d3f41f8a0_b.jpg"><br>
</div>
<div class="midtitle17011401">滑鼠移入圖放大</div>
<div class="ironcontent17011401">CSS的互動變化能力,可以使得一些複雜的變化形式,變得容易被思考出來。<span
style="color: red;"><br>
這裡我強
調思考形式!<br>
</span>互動文本的思考形式作用於互動變化,在於創造互動閱讀狀況下,對文本理解可能的新解讀廣度。<span
style="color: red;">這種互
動解讀特色在於空間的變化,所產生的意義解
讀的全新解讀可
能性</span>。但這種全新的寫作模式,寫作狀態,寫作思考,是以前的寫作經驗所沒有的,需要有著全新的學習過程,以及對之的全新想像。</div>
<br>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">CSS語法:</span></big><br>
<br>
<style><br>
.div0001 {<br>
overflow: hidden;<br>
float: left;<br>
margin-right: 20px;<br>
margin-bottom: 12px;<br>
}<br>
<br>
.div0001 >img {<br>
width: 1024px;<br>
transform: translate(-270px, -330px);<br>
}<br>
<br>
.div0001:hover {<br>
overflow:visible;<br>
}<br>
<br>
.div0001:hover >img {<br>
transform: translate(0px, 0px);<br>
width: 576px;<br>
opacity: 0;<br>
-webkit-animation: myanim16122001 1s 1;<br>
animation-timing-function: linear;<br>
animation-fill-mode: forwards;<br>
}<br>
<br>
@-webkit-keyframes myanim16122001 {<br>
0% {opacity: 0;}<br>
5% {opacity: 0;}<br>
100% {opacity: 1;}<br>
}<br>
<br>
/* 中標 */<br>
.midtitle17011401 {<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.37em;<br>
font-weight: bold;<br>
line-height: 1.6;<br>
letter-spacing: 0.1em;<br>
text-align: center;<br>
margin-bottom: 0.5em;<br>
}<br>
<br>
/* 基本黑體內文 */<br>
.ironcontent17011401 {<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.17em;<br>
font-weight: normal;<br>
line-height: 1.87;<br>
text-align: left;<br>
letter-spacing: 0.08em;<br>
}<br>
<br>
</style><br>
<br>
<br>
<br>
<br>
M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com1tag:blogger.com,1999:blog-4179719354980918481.post-20887389118752308132016-12-23T14:41:00.003+08:002017-01-05T15:15:28.783+08:00CSS: transform: 2D變形效果<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}
.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
.wird2017010101 {
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: bold;
line-height: 1.6em;
}
.imglbac161223 {
}
.imgdiv161223 {
padding-left: 62%;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
.divword16122301 {
width: 60%;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.6em;
text-align: justify;
text-justify: distribute;
letter-spacing: 0.1em;
margin-top: -138px;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
.imglbac161223:hover >div:nth-of-type(1) {
padding-left: 0;
}
.imglbac161223:hover >div:nth-of-type(1) >img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.imglbac161223:hover >div:nth-of-type(2) {
padding-left: 40%;
}
.imglbac161223:hover >div:nth-of-type(2) >span{
color: red;
text-decoration: underline;
-webkit-transition: 0.3s all linear 1s;
-moz-transition: 0.3s linear 1s;
-o-transition: 0.3s linear 1s;
-ms-transition: 0.3s linear 1s;
transition: 0.3s all linear 1s;
}
.word16122301 {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
font-family: Verdana, '微軟正黑體';
font-size: 2.61em;
font-weight: bold;
line-height: 2em;
letter-spacing: 0.02em;
}
div.trarota161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}
div.trarota161223:hover {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
div.trasca161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}
div.trasca161223:hover {
-webkit-transform: scale(0.5, 2);
-moz-transform: scale(0.5, 2);
-0-transform: scale(0.5, 2);
-ms-transform: scale(0.5, 2);
transform: scale(0.5, 2);
}
.div16122301 {
border: 1px solid darkred;
}
div.tratral161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
div.div16122301:hover >div.tratral161223 {
-webkit-transform: translate(200px, 20px);
-moz-transform: translate(200px, 20px);
-0-transform: translate(200px, 20px);
-ms-transform: translate(200px, 20px);
transform: translate(200px, 20px);
}
.div16122302 {
border: 1px solid darkred;
}
div.traskew161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
div.div16122302:hover >div.traskew161223 {
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-0-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(30deg);
}
.div16122303 {
border: 1px solid darkred;
text-align: center;
}
div.div16122303 >img {
margin: 0px;
padding: 0px;
border: none;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
div.div16122303:hover > img:nth-of-type(2) {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
transform-origin: 0% 100%;
}
.teamov16122601 {
background-image: url(https://lh3.googleusercontent.com/yEBTK_GbNnaDo0gjkPKBZYyZNsdM8KtYSX2PmIapEldYLLiGrb97rtEpL-bGD7qSgEv6qjt5gVzorhNkQCsADt3XEV02wV0jfffTE9zF8CF0CZx7lcN228iSHZz3487AXd-N9aBDsRNdZV6M3Xu8X9MeqFP-aQgh3jjVX4CeKvWGYy9iReCys_71Jj4xw27SCwEKDGSoJX04kb3Pv1I0eZOGUzvfdN4FPEqhRrSASv-J4DGY1VRTumnhxG7utWl2Tez_yConDkAft4sSAdDuGm0bA8ORDrn4DaRydoeW54TEyMmtb10D8UrpGT-4EBbuVikxkNe84bb9rPBH9Om2igoZ-HYRyvH80ViqUTJXLNcArpNuco_CTVCO5_qhcQyfuVH_ERx5XqFxyEKD40r-SUHk46zMdYldYDpY-MN4LpXqPffGBHgtjjiiMmg-J6oUgXcHVPmi3MVDErLD9uhj5UADJVSe6h8XULCs1uPvmyMRjK2hiSoZZt6REjfcXuDTy91WftoKZV6lDxiy5fjdb-0uPrLHq5ijSGjCvc2UPHJtFQnawWiMPYOchTSMSvZ54sWRye-M6PpuJBMhRASbvLwYNd8LfpSdGfD28LOd7JN1mCgDixqn=s64-no);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}
.teamov16122601:hover {
-webkit-animation: myanim16122601 0.5s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes myanim16122601 {
0% {background-position: left center;}
100% {background-position: left 2px center;}
}
</style>
<br>
<div class="word16122301">
CSS: transform: 2D變形效果<br></div>
<div class="imglbac161223">
<div class="imgdiv161223"><img style="width: 200px; height: 133px;"
alt=""
src="https://lh3.googleusercontent.com/me4AnDBc42jVbQVAGVWUicrz0clD5bDBo4rpaLS3KfszdaJ18iupFs8-1s7B9qgYqNBzFSJtmIv-QlA_tQsO5_RL594zNwX8VDiKVRchxVLWnggd8Fnnnr0PM4PuRXLhisU_raiQfXAPUVNV9BTpPnF9C5inymrYk-vmbPECpiB1lufDIkRzifYNphzHg5OvWreurhayDIGCxN7ZxAylA2BV1L7DDXUKbbWk-5pW8vP-FZ0wBbbJys98FVOeEraaoJlznRtL5CrFTpv-aMY6DMwCj4S1epQhASNZD7IhRSPh8c8Myl2Hs5atKd5_MrjqTCaX1gK4axkc3tauz30vM_vYV6rLWZCVnOT4qen0VJLpsZA2RFAuxQpK5CdJZHdug02ueBjfVzP50GfiZOHB5Dnjo13107tJMXv_U62tiCPYVCUnz_oIM1mraUGL-BBdCzj5yzcvaH4nsG6AaQEKeI504V5qieZmJG8_mZqeic55G7xsNVPy_SZP2A8aAhDIonFmofn_JCmuNnepcFqKE4lj3i4SHFtqcF8PqDCXxxALKHO4wHb__8doRDUOL2hnsKVGjmd2tFrtK5s0zHi-pIOWoBstlEAkke27-F34QsEEas71n0aZKw=w1184-h790-no"></div>
<div class="divword16122301">CSS的互動變化能力,愈來愈強。就技術面而言,要學的固來很多,但更<span>重要的核心</span>問在於:這
些技術要如何來使用,可以讓對文本的理解,表現出數位文本的<span>對
話性意義給出</span>特色。(mouseover)</div>
</div>
<br>
<br>
<br>
<div onclick="$(this).next().slideToggle(600);" class="teamov16122601">教學影音 click!!<br>
</div>
<iframe style="display:none;" src="https://www.youtube.com/embed/Gzj0vGux4ZQ?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
<br>
<br>
<big><span style="text-decoration: underline;">寫作物件的「旋轉」</span></big><br>
<br>
<span style="font-weight: bold;">CSS範例: transform: rotate();</span><br>
<br>
<style><br>
div.trarota161223 {<br>
border: 1px solid darkorange;<br>
width: 100px;<br>
height: 100px;<br>
margin: auto;<br>
background-color: lightgray;<br>
}<br>
<br>
div.trarota161223:hover {<br>
-webkit-transform: rotate(10deg);<br>
-moz-transform: rotate(10deg);<br>
-0-transform: rotate(10deg);<br>
-ms-transform: rotate(10deg); <br>
transform: rotate(10deg);<br>
}<br>
</style><br>
<br>
<br>
<br>
<div class="trarota161223"><br>
</div>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">寫作物件的「縮放」</span></big><br>
<br>
<span style="font-weight: bold;">CSS範例: scale() /scaleX()/ scaleY();</span><br>
<br>
<style><br>
div.trasca161223 {<br>
border: 1px solid darkorange;<br>
width: 100px;<br>
height: 100px;<br>
margin: auto;<br>
background-color: lightgray;<br>
}<br>
<br>
div.trasca161223:hover {<br>
-webkit-transform: scale(0.5, 2);<br>
-moz-transform: scale(0.5, 2);<br>
-0-transform: scale(0.5, 2);<br>
-ms-transform: scale(0.5, 2);<br>
transform: scale(0.5, 2);<br>
}<br>
</style><br>
<br>
<br>
<div class="trasca161223"><br>
</div>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">寫作物件的「移動」</span></big><br>
<br>
<span style="font-weight: bold;">CSS範例: translate() /translateX()/
translateY();</span><br>
<br>
<style><br>
.div16122301 {<br>
border: 1px solid darkred;<br>
}<br>
<br>
div.tratral161223 {<br>
border: 1px solid darkorange;<br>
width: 100px;<br>
height: 100px;<br>
background-color: lightgray;<br>
<br>
-webkit-transition: 1s linear;<br>
-moz-transition: 1s linear;<br>
-o-transition: 1s linear;<br>
-ms-transition: 1s linear;<br>
transition: 1s linear;<br>
}<br>
<br>
div.div16122301:hover >div.tratral161223 {<br>
-webkit-transform: translate(200px, 20px);<br>
-moz-transform: translate(200px, 20px);<br>
-0-transform: translate(200px, 20px);<br>
-ms-transform: translate(200px, 20px);<br>
transform: translate(200px, 20px);<br>
}<br>
</style><br>
<br>
<br>
<div class="div16122301">
<div class="tratral161223"><br>
</div>
</div>
<br>
<br>
<br>
<div onclick="$(this).next().slideToggle(600);" class="teamov16122601">教
學影音 click!!<br>
</div>
<iframe style="display: none;" src="https://www.youtube.com/embed/TQrYEeYkI0U?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">寫作物件的「傾斜」</span></big><br>
<br>
<span style="font-weight: bold;">CSS範例: skew()/ skewX()/ skewY();</span><br>
<br>
<style><br>
.div16122302 {<br>
border: 1px solid darkred;<br>
}<br>
<br>
div.traskew161223 {<br>
border: 1px solid darkorange;<br>
width: 100px;<br>
height: 100px;<br>
background-color: lightgray;<br>
<br>
-webkit-transition: 1s linear;<br>
-moz-transition: 1s linear;<br>
-o-transition: 1s linear;<br>
-ms-transition: 1s linear;<br>
transition: 1s linear;<br>
}<br>
<br>
div.div16122302:hover >div.traskew161223 {<br>
-webkit-transform: skewX(30deg);<br>
-moz-transform: skewX(30deg);<br>
-0-transform: skewX(30deg);<br>
-ms-transform: skewX(30deg);<br>
transform: skewX(30deg);<br>
}<br>
</style><br>
<br>
<br>
<div class="div16122302">
<div class="traskew161223"><br>
</div>
</div>
<br>
<span style="text-decoration: underline;">說明:</span><br>
指定x軸,x不動,效果:<br>
y軸往x軸方向以逆時方向傾斜30度的形狀。<br>
指定y軸,y不動,效果:<br>
x軸往Y軸方向以順時方向傾斜30度的形狀。<br>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">寫作物件的transform的「原點轉移」</span></big><br>
<br>
<span style="font-weight: bold;">CSS範例: transform-origin: x% y%;</span><br>
<br>
<style><br>
.div16122303 {<br>
border: 1px solid darkred;<br>
text-align: center;<br>
}<br>
<br>
div.div16122303 >img {<br>
margin: 0px;<br>
padding: 0px;<br>
border: none;<br>
<br>
-webkit-transition: 1s linear;<br>
-moz-transition: 1s linear;<br>
-o-transition: 1s linear;<br>
-ms-transition: 1s linear;<br>
transition: 1s linear;<br>
}<br>
<br>
div.div16122303:hover > img:nth-of-type(2) {<br>
-webkit-transform: rotate(10deg);<br>
-moz-transform: rotate(10deg);<br>
-0-transform: rotate(10deg);<br>
-ms-transform: rotate(10deg);<br>
transform: rotate(10deg);<br>
transform-origin: 0% 100%;<br>
}<br>
</style><br>
<br>
<br>
<div class="div16122303">
<img style="width: 200px; height: 133px;" alt=""
src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg">
<img style="width: 200px; height: 133px;" alt=""
src="https://c6.staticflickr.com/9/8637/28854719061_2c5ac0918e_b.jpg"><br>
</div>
<br>
<span style="text-decoration: underline;">說明:</span><br>
x軸:left / 0%, center /50%, right /100%;<br>
Y軸: top /0%, center /50%, bottom / 100%;<br>
<br>
<br>
<br>
<br>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">使用click的
方法</span></big><br>
<br>
<br>
<div class="wird2017010101">如果<span
style="text-decoration: underline; color: red;">想要:click一下,物件可以移動,而不是使用hover功能。</span>這
樣的互動模態之文本形式,可以使用jQuery程式來達成。<br>
我們可以看到簡單的運用jQuery的toggleClass(),再配合使用css
trnsition以及transform之語法,就可以創造補間形式的動態效果。<br>
這一作用更直覺,更適合一般人的直覺寫作思考。<br>
</div>
<img onclick="$(this).toggleClass('clicsstt170101add01');"
style="width: 192px; height: 181px; position: relative; top: -180px; left: 360px; margin-bottom: -180px;"
class="clicsstt170101" alt=""
src="https://lh3.googleusercontent.com/pTzH3wyRGOaR_-xHCDDX5nBrA44JgrJ0oTkVoOBzXNPNbXhlemMu4MYYQ9PkdC8oJ35ape2CaYCyrBtB1ksYQLJxFZAZXUZTpzfA4R0SMRwB6psWZFMeg4x-XqnAdS2yoCi47kEQXNt06_NLSe0FVWvZ41Vv79DnWH6nxyDPvXCPZbRfM8dj5M0AdGrfqab3mX7UskuLb6pQnGdHRYe_PbzzRW6HUGQqPCn5-JPIYQfrLHwyyhhzjoZ_WPImLJ7NLuBa8g8JlCv7leP7j323EZw0FL5Yy7_Y_NTHKq-2SmxA0_dyqPJycwF8X1V1OnODyNJzAFDq9d9_dx7QDmunlzimPwdOWgyhsxWfg379FIO0Hj9LK7f8EVFsE8pt3LxBPHpAkbJbf4bFJpRU8zZKdLuWwsFbgQTXxQrGu7xCM8CzK_g5uH7BW6CiOT8O9qwNTOwB30oBSMB0fIJ5d3Fsew36xcdgAdoP2vh_0Kl-6mZbs4diQ8V9RsklY5ZyTYQMIKu15Cuhi8rFXycdJW1k4gJEgj1Dl9Tp7cHWPl7G71MKcREvVp9GnGR3i2dy4xUXHKOnNfNCVPqXJ5q3hM9sbC54bnXQpJl5kLP8EbN71wUgGntLiNqrEA=w600-h566-no"><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">CSS:</span><br>
<br>
<style><br>
.clicsstt170101 {<br>
-webkit-transition: 1s linear;<br>
-moz-transition: 1s linear;<br>
-o-transition: 1s linear;<br>
-ms-transition: 1s linear;<br>
transition: 1s linear;<br>
cursor: pointer;<br>
}<br>
<br>
.<span style="color: rgb(204, 0, 0);">clicsstt170101add01</span> {<br>
transform: translate(-350px, -140px);<br>
}<br>
</style><br>
<br>
<br>
<span style="text-decoration: underline; font-weight: bold;">jQuery:
click</span><br>
<br>
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script><br>
<br>
<br>
$(this).toggleClass('<span style="color: rgb(204, 0, 0);">clicsstt170101add01</span>');<br>
<br>
<br>
<div onclick="$(this).next().slideToggle(600);" class="teamov16122601">教學影音 click!!<br>
</div>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/zwddvAaeEKs?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<br>
<br>
M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-53850059128778447292016-12-20T15:05:00.000+08:002017-01-05T15:55:33.269+08:00動畫的使用與設計 CSS: @keyframes<style>
.word16122401 {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
font-family: Verdana, '微軟正黑體';
font-size: 2.91em;
font-weight: bold;
line-height: 1.12em;
letter-spacing: 0.02em;
margin-bottom: 1em;
-webkit-animation: myanim16122401 15s infinite;
animation-timing-function: linear;
animation-play-state: running;
}
@-webkit-keyframes myanim16122401 {
0% {text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;}
30% {text-shadow: rgba(240,0,120,0.2) 0px 3px 3px;}
70% {text-shadow: rgba(0,114,227,0.2) 0px 3px 3px;}
85% {text-shadow: rgba(255,128,0,0.2) 0px 3px 3px;}
}
div.word16122401:hover {
animation-play-state: paused;
}
div.imagkey1220 {
color: gray;
-webkit-animation: myanim16122001 15s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes myanim16122001 {
0% {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}
img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes myanim16122002 {
0% {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-25deg);}
50% {-webkit-transform: rotate(-75deg);}
80% {-webkit-transform: rotate(-120eg);}
100% {-webkit-transform: rotate(-60deg);}
}
div.imagkey1220b {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
animation-play-state: paused;
}
div.imagkey1220b:hover {
animation-play-state: running;
}
.teamov16122601 {
background-image: url(https://lh3.googleusercontent.com/yEBTK_GbNnaDo0gjkPKBZYyZNsdM8KtYSX2PmIapEldYLLiGrb97rtEpL-bGD7qSgEv6qjt5gVzorhNkQCsADt3XEV02wV0jfffTE9zF8CF0CZx7lcN228iSHZz3487AXd-N9aBDsRNdZV6M3Xu8X9MeqFP-aQgh3jjVX4CeKvWGYy9iReCys_71Jj4xw27SCwEKDGSoJX04kb3Pv1I0eZOGUzvfdN4FPEqhRrSASv-J4DGY1VRTumnhxG7utWl2Tez_yConDkAft4sSAdDuGm0bA8ORDrn4DaRydoeW54TEyMmtb10D8UrpGT-4EBbuVikxkNe84bb9rPBH9Om2igoZ-HYRyvH80ViqUTJXLNcArpNuco_CTVCO5_qhcQyfuVH_ERx5XqFxyEKD40r-SUHk46zMdYldYDpY-MN4LpXqPffGBHgtjjiiMmg-J6oUgXcHVPmi3MVDErLD9uhj5UADJVSe6h8XULCs1uPvmyMRjK2hiSoZZt6REjfcXuDTy91WftoKZV6lDxiy5fjdb-0uPrLHq5ijSGjCvc2UPHJtFQnawWiMPYOchTSMSvZ54sWRye-M6PpuJBMhRASbvLwYNd8LfpSdGfD28LOd7JN1mCgDixqn=s64-no);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}
.teamov16122601:hover {
-webkit-animation: myanim16122601 0.5s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes myanim16122601 {
0% {background-position: left center;}
100% {background-position: left 2px center;}
}
</style>
<br>
<div class="word16122401">
動畫的使用與設計<br>
CSS: @keyframes<br></div>
<div onclick="$(this).next().slideToggle(600);" class="teamov16122601">教學影音 click!!<br>
</div>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/Lxny37cSz38?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<div class="imagkey1220"><img style="width: 64px; height: 63px;"
class="keyrota" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlL-48blwpw37TQlscAqepBz0sAztDOFxSpHWHfaMpHJReJGxqyigaxIO3UScVeBo-CQv26xP0xKrqLZBctvIuWn5S2tfb5piFEstdWw-x5qcNRKsxZM4QEj3EQUx3hMMQrav_Z5m8ODc/w617-h605-no/"><br>
</div>
<br>
<big><span style="text-decoration: underline;">自動啟動的動畫效果</span></big><br>
<br>
<style><br>
<br>
div.imagkey1220 {<br>
color: gray;<br>
-webkit-animation: myanim16122001 5s infinite;<br>
animation-timing-function: linear; <br>
}<br>
<br>
@-webkit-keyframes myanim16122001 {<br>
0% {padding-left: 0px;}<br>
50% {padding-left: 220px;}<br>
100% {padding-left: 500px;}<br>
}<br>
<br>
img.keyrota {<br>
-webkit-animation: myanim16122002 3s infinite;<br>
animation-timing-function: linear; <br>
}<br>
<br>
@-webkit-keyframes myanim16122002 {<br>
0% {-webkit-transform: rotate(-0deg);}<br>
30% {-webkit-transform: rotate(-15deg);}<br>
50% {-webkit-transform: rotate(-45deg);}<br>
80% {-webkit-transform: rotate(-90eg);}<br>
100% {-webkit-transform: rotate(-60deg);}<br>
}<br>
<br>
</style><br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="imagkey1220b"><img style="width: 64px; height: 63px;"
class="keyrota" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlL-48blwpw37TQlscAqepBz0sAztDOFxSpHWHfaMpHJReJGxqyigaxIO3UScVeBo-CQv26xP0xKrqLZBctvIuWn5S2tfb5piFEstdWw-x5qcNRKsxZM4QEj3EQUx3hMMQrav_Z5m8ODc/w617-h605-no/"><br>
</div>
<br>
<big><span style="text-decoration: underline;">滑鼠移入啟動移出停止的效果</span></big><br>
<br>
<style><br>
<br>
div.imagkey1220b {<br>
color: gray;<br>
-webkit-animation: myanim16122001 5s infinite;<br>
animation-timing-function: linear; <br>
<span style="color: red;">animation-play-state: paused;</span><br>
}<br>
<br>
@-webkit-keyframes myanim16122001 {<br>
0% {padding-left: 0px;}<br>
50% {padding-left: 220px;}<br>
100% {padding-left: 500px;}<br>
}<br>
<br>
div.imagkey1220b:hover {<br>
<span style="color: red;">animation-play-state: running;</span><br>
}<br>
<br>
img.keyrota {<br>
-webkit-animation: myanim16122002 3s infinite;<br>
animation-timing-function: linear; <br>
}<br>
<br>
@-webkit-keyframes myanim16122002 {<br>
0% {-webkit-transform: rotate(-0deg);}<br>
30% {-webkit-transform: rotate(-15deg);}<br>
50% {-webkit-transform: rotate(-45deg);}<br>
80% {-webkit-transform: rotate(-90eg);}<br>
100% {-webkit-transform: rotate(-60deg);}<br>
}<br>
<br>
</style><br>
<br>
<br>
<br>
<br>
<div onclick="$(this).next().slideToggle(600);" class="teamov16122601">教學影音 click!!<br>
</div>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/NGpGtRsatzk?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<big><span style="text-decoration: underline;">補充資料css:上面會自動移動的play
icon
</span></big><br>
<br>
<br>
.teamov16122601 {<br>
background-image:
url(圖像網址);<br>
background-repeat: no-repeat;<br>
background-size: 24px;<br>
background-position: left center;<br>
padding-left: 30px;<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.21em;<br>
font-weight: bold;<br>
line-height: 1.8em;<br>
letter-spacing: 0.1em;<br>
cursor: pointer;<br>
}<br>
<br>
.teamov16122601:hover {<br>
-webkit-animation: myanim16122601 0.5s infinite;<br>
animation-timing-function: linear; <br>
<br>
}<br>
<br>
@-webkit-keyframes myanim16122601 {<br>
0% {background-position: left center;}<br>
100% {background-position: left 2px center;}<br>
}<br>
<br>
<br>
<br>
參考圖像 <img style="width: 64px; height: 64px;" alt=""
src="https://lh3.googleusercontent.com/yEBTK_GbNnaDo0gjkPKBZYyZNsdM8KtYSX2PmIapEldYLLiGrb97rtEpL-bGD7qSgEv6qjt5gVzorhNkQCsADt3XEV02wV0jfffTE9zF8CF0CZx7lcN228iSHZz3487AXd-N9aBDsRNdZV6M3Xu8X9MeqFP-aQgh3jjVX4CeKvWGYy9iReCys_71Jj4xw27SCwEKDGSoJX04kb3Pv1I0eZOGUzvfdN4FPEqhRrSASv-J4DGY1VRTumnhxG7utWl2Tez_yConDkAft4sSAdDuGm0bA8ORDrn4DaRydoeW54TEyMmtb10D8UrpGT-4EBbuVikxkNe84bb9rPBH9Om2igoZ-HYRyvH80ViqUTJXLNcArpNuco_CTVCO5_qhcQyfuVH_ERx5XqFxyEKD40r-SUHk46zMdYldYDpY-MN4LpXqPffGBHgtjjiiMmg-J6oUgXcHVPmi3MVDErLD9uhj5UADJVSe6h8XULCs1uPvmyMRjK2hiSoZZt6REjfcXuDTy91WftoKZV6lDxiy5fjdb-0uPrLHq5ijSGjCvc2UPHJtFQnawWiMPYOchTSMSvZ54sWRye-M6PpuJBMhRASbvLwYNd8LfpSdGfD28LOd7JN1mCgDixqn=s64-no"><br>
<br>
<br>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-24597861349072078972016-11-29T15:09:00.002+08:002017-10-04T10:25:37.949+08:00精準控制互動物件:CSS選擇器:自身、父子、兄弟關係選擇<br>
<style>
.tdimgup1129 >img {
position: relative;
top: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
border: 0px solid red;
padding: 0px;
margin: 0px;
}
.tdimgup1129:hover >img {
top: -15px;
}
.lititlemingbo161129 {
margin: 6px 0px 8px 0px;
line-height: 18px;
color: rgb(0, 0, 0);
font-family: Verdana,Arial;
font-size: 15px;
font-weight: bold;
letter-spacing: normal;
orphans: 2;
text-align: left;
background-color: rgba(249, 249, 249, 0.8);
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}
.hoverself1129 {
}
.hoverself1129:hover {
background: rgba(92, 173, 173, 0.6);
}
.hoverself112902 {
}
.hoverself112902:hover >span {
color: red;
font-weight: bold;
}
.hoverbro1129 {
border-left: 2px solid transparent;
}
.hoverbro1129:hover +div {
border-left: 2px solid darkred;
padding-left: 2em;
}
.teamov16122601 {
background-image: url(https://lh3.googleusercontent.com/yEBTK_GbNnaDo0gjkPKBZYyZNsdM8KtYSX2PmIapEldYLLiGrb97rtEpL-bGD7qSgEv6qjt5gVzorhNkQCsADt3XEV02wV0jfffTE9zF8CF0CZx7lcN228iSHZz3487AXd-N9aBDsRNdZV6M3Xu8X9MeqFP-aQgh3jjVX4CeKvWGYy9iReCys_71Jj4xw27SCwEKDGSoJX04kb3Pv1I0eZOGUzvfdN4FPEqhRrSASv-J4DGY1VRTumnhxG7utWl2Tez_yConDkAft4sSAdDuGm0bA8ORDrn4DaRydoeW54TEyMmtb10D8UrpGT-4EBbuVikxkNe84bb9rPBH9Om2igoZ-HYRyvH80ViqUTJXLNcArpNuco_CTVCO5_qhcQyfuVH_ERx5XqFxyEKD40r-SUHk46zMdYldYDpY-MN4LpXqPffGBHgtjjiiMmg-J6oUgXcHVPmi3MVDErLD9uhj5UADJVSe6h8XULCs1uPvmyMRjK2hiSoZZt6REjfcXuDTy91WftoKZV6lDxiy5fjdb-0uPrLHq5ijSGjCvc2UPHJtFQnawWiMPYOchTSMSvZ54sWRye-M6PpuJBMhRASbvLwYNd8LfpSdGfD28LOd7JN1mCgDixqn=s64-no);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}
.teamov16122601:hover {
-webkit-animation: myanim16122601 0.5s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes myanim16122601 {
0% {background-position: left center; background-size: 24px;}
100% {background-position: left -2px center; background-size: 28px;}
}
.teamov17011002 {
background-image: url(https://lh3.googleusercontent.com/yEBTK_GbNnaDo0gjkPKBZYyZNsdM8KtYSX2PmIapEldYLLiGrb97rtEpL-bGD7qSgEv6qjt5gVzorhNkQCsADt3XEV02wV0jfffTE9zF8CF0CZx7lcN228iSHZz3487AXd-N9aBDsRNdZV6M3Xu8X9MeqFP-aQgh3jjVX4CeKvWGYy9iReCys_71Jj4xw27SCwEKDGSoJX04kb3Pv1I0eZOGUzvfdN4FPEqhRrSASv-J4DGY1VRTumnhxG7utWl2Tez_yConDkAft4sSAdDuGm0bA8ORDrn4DaRydoeW54TEyMmtb10D8UrpGT-4EBbuVikxkNe84bb9rPBH9Om2igoZ-HYRyvH80ViqUTJXLNcArpNuco_CTVCO5_qhcQyfuVH_ERx5XqFxyEKD40r-SUHk46zMdYldYDpY-MN4LpXqPffGBHgtjjiiMmg-J6oUgXcHVPmi3MVDErLD9uhj5UADJVSe6h8XULCs1uPvmyMRjK2hiSoZZt6REjfcXuDTy91WftoKZV6lDxiy5fjdb-0uPrLHq5ijSGjCvc2UPHJtFQnawWiMPYOchTSMSvZ54sWRye-M6PpuJBMhRASbvLwYNd8LfpSdGfD28LOd7JN1mCgDixqn=s64-no);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}
.teamov17011002 >span {
padding-left: 10px;
color: red;
opacity: 0;
}
.teamov17011002:hover >span {
-webkit-animation: myanim17011002 0.5s infinite;
animation-timing-function: linear;
opacity: 1;
}
@-webkit-keyframes myanim17011002 {
0% {padding-left: 10px;}
100% {padding-left: 7px;}
}
</style>
<br>
CSS:hover 各種表現形式及轉場動態<br>
<br>
CSS:hover可以有互動效果,加上父子、兄弟關係的運用,最後再附上轉場效果,就有能讓你驚豐的視覺豐富感。更重要的是,這一方法可以讓使用者有著
強大的思考空間,來創作。<br><br>
<div onclick="$(this).next().slideToggle(800);" class="teamov16122601">教學影音 click!!<br>
</div>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/tkLa2ifcWK4?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<div class="lititlemingbo161129">CSS:hover 自身互動</div>
<div class="hoverself1129">互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004:
8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005:
9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007:617)。</div>
<br>
css碼:<br>
<br>
<style><br>
.hoverself1129 {<br>
}<br>
<br>
.hoverself1129:hover {<br>
background: rgba(92, 173, 173, 0.6);<br>
}<br>
</style><br>
<br>
<br>
<div class="lititlemingbo161129">CSS:hover 父子關係</div>
<div class="hoverself112902">互動在多媒體系統/文本的討論中一直「<span
style="text-decoration: underline;">處於核心地位</span>」(Barfield, 2004:
8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005:
9)。數位敘事寫作而言,「<span>關於敘事之未來的大多數文獻中,互動性是一條黃金標準</span>」(H.波特.阿博特/陳永國譯,2007:
617)。</div>
<br>
css碼:<br>
<br>
<style><br>
.hoverself112902 {<br>
}<br>
<br>
.hoverself112902:hover >span {<br>
color: red;<br>
font-weight: bold;<br>
}<br>
</style><br>
<br>
<br>
<div onclick="$(this).next().slideToggle(800);" class="teamov17011002">教學影音 <span>click !</span><br>
</div>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/82MM2YuQpDI?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<div class="lititlemingbo161129 hoverbro1129">CSS:hover 兄弟關係</div>
<div>互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004:
8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005:
9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007:
617)。</div>
<br>
<style><br>
.hoverbro1129 {<br>
border-left: 2px solid transparent;<br>
}<br>
<br>
.hoverbro1129:hover +div {<br>
border-left: 2px solid darkred;<br>
padding-left: 2em;<br>
}<br>
</style><br>
<br>
<span style="font-weight: bold; text-decoration: underline;">補充說明:當中間有
<br>段行空白,請加+br</span><br>
<br>
.hoverbro1129:hover +br +br +div {<br>
color: red;<br>
}<br>
<br>
<br>
<span style="font-weight: bold; text-decoration: underline;">補充說明:想要有動態效
果,請加入下列css碼</span><br>
<br>
-webkit-transition: 1s;<br>
-moz-transition: 1s;<br>
-o-transition: 1s;<br>
-ms-transition: 1s;<br>
transition: 1s;<br>
<br>
<br>
<div class="lititlemingbo161129">創作範例:</div>
<br>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 184px;" class="tdimgup1129"><img
style="width: 184px; height: 123px;" alt=""
src="https://c3.staticflickr.com/6/5337/30917723706_13847600c1_b.jpg"><br>
</td>
<td style="vertical-align: top; width: 184px;" class="tdimgup1129"><img
style="width: 184px; height: 123px;" alt=""
src="https://c1.staticflickr.com/6/5586/30837219312_7c8a8ee18f_b.jpg"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
CSS碼:<br>
<br>
<style><br>
.tdimgup1129 >img {<br>
position: relative;<br>
top: 0px;<br>
-webkit-transition: 0.5s;<br>
-moz-transition: 0.5s;<br>
-o-transition: 0.5s;<br>
-ms-transition: 0.5s;<br>
transition: 0.5s;<br>
}<br>
<br>
.tdimgup1129:hover >img {<br>
top: -15px;<br>
}<br>
<br>
</style><br>
<br>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0tag:blogger.com,1999:blog-4179719354980918481.post-63264604619171239672016-11-01T15:06:00.007+08:002018-01-15T18:12:09.361+08:00bxSlider 快速使用:2016年版
<link
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css"
rel="stylesheet">
<br>
<style>
.bigtitle011101 {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 1.5em;
padding-left: 2.5em;
border-bottom: 3px solid darkorange;
}
.ironlittibo011101 {
font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
text-shadow:0px 0px 15px #FF37FD;
text-align: center;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.lititlemingbo161101 {
margin: 12px 0px 0px;
line-height: 18px;
color: rgb(0, 0, 0);
font-family: Verdana,Arial;
font-size: 15px;
font-weight: bold;
letter-spacing: normal;
orphans: 2;
text-align: left;
background-color: rgb(249, 249, 249);
-webkit-box-shadow: 1px 1px silver;
}
div.afa1101 {
}
div.afa1101:hover >div:nth-of-type(2) {
text-shadow:0px 0px 15px #6FB7B7;
}
div.afa1101:hover >div:nth-of-type(1) {
-webkit-animation: myanimate01 7s linear 1s 2;
}
@-webkit-keyframes myanimate01 {
0% {padding-left: 2.5em;}
25% {padding-left: 0.1em;}
70% {padding-left: 4.8em;}
100% {padding-left: 2.5em;}
}
.ironcontentbo011101 {
font-family: Verdana, '微軟正黑體';
font-size: 1.13em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
.ironcontentmi011101 {
font-family: Verdana, '新細明體';
font-size: 14px;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}
ul.bxslider li >img {
border: 0px solid red;
padding: 0px;
margin: 0px;
}
.teamov17011001 {
background-image: url(https://lh3.googleusercontent.com/yEBTK_GbNnaDo0gjkPKBZYyZNsdM8KtYSX2PmIapEldYLLiGrb97rtEpL-bGD7qSgEv6qjt5gVzorhNkQCsADt3XEV02wV0jfffTE9zF8CF0CZx7lcN228iSHZz3487AXd-N9aBDsRNdZV6M3Xu8X9MeqFP-aQgh3jjVX4CeKvWGYy9iReCys_71Jj4xw27SCwEKDGSoJX04kb3Pv1I0eZOGUzvfdN4FPEqhRrSASv-J4DGY1VRTumnhxG7utWl2Tez_yConDkAft4sSAdDuGm0bA8ORDrn4DaRydoeW54TEyMmtb10D8UrpGT-4EBbuVikxkNe84bb9rPBH9Om2igoZ-HYRyvH80ViqUTJXLNcArpNuco_CTVCO5_qhcQyfuVH_ERx5XqFxyEKD40r-SUHk46zMdYldYDpY-MN4LpXqPffGBHgtjjiiMmg-J6oUgXcHVPmi3MVDErLD9uhj5UADJVSe6h8XULCs1uPvmyMRjK2hiSoZZt6REjfcXuDTy91WftoKZV6lDxiy5fjdb-0uPrLHq5ijSGjCvc2UPHJtFQnawWiMPYOchTSMSvZ54sWRye-M6PpuJBMhRASbvLwYNd8LfpSdGfD28LOd7JN1mCgDixqn=s64-no);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}
.teamov17011001:hover::after {
content:"CLICK !";
color: red;
}
.teamov17011001:hover >span {
-webkit-animation: myanim16122601 0.8s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes myanim16122601 {
0% {margin-right: 5px;}
100% {margin-right: 3px;}
}
</style>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script><!-- bxSlider CSS file -->
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<script>
$(document).ready(function(){
$('.slider2').bxSlider({
slideWidth: 250,
minSlides: 2,
maxSlides: 2,
slideMargin: 10
});
});
</script>
<br>
<div class="afa1101">
<div class="bigtitle011101">可快速使用的content slider。</div>
<div class="ironlittibo011101">同時又可以依創作者的要求,快速地<br>
來做出不同小大樣態的互動媒材。</div>
</div>
<br>
<div onclick="$(this).next().slideToggle(800);" class="teamov17011001"><span>教學影音</span>
</div>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/92nzU-C8_bo?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">一、把下列程
式碼copy到<head>xxx</head>之間(課堂建議)或<body>之後:</span></big><br>
<br>
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script><br>
<br>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js"><br>
</script><br>
<link
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css"
rel="stylesheet"><br>
<br>
<script type="text/javascript"><br>
$(document).ready(function(){<br>
$('.bxslider').bxSlider();<br>
});<br>
</script><br>
<br>
<br>
<br>
<div class="lititlemingbo161101">範例一:就直接使用。</div>
<br>
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">HTML碼:</span></big><br>
<br>
<ul class="bxslider"><br>
<li><img<br>
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li><br>
<li><img<br>
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li><br>
<li><img<br>
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li><br>
<li><img<br>
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li><br>
</ul><br>
<br>
<br>
<br>
<div class="lititlemingbo161101">範例二:用div來設置大小</div>
<br>
<div style="border: 1px solid red; width: 320px;">
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
</div>
<big><br style="text-decoration: underline; font-weight: bold;">
<span style="text-decoration: underline; font-weight: bold;">HTML碼:</span></big><br>
<br>
<span style="color: rgb(204, 0, 0);"><div style="border: 1px solid
red; width: 320px;"></span><br>
<ul class="bxslider"><br>
<li><img<br>
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li><br>
<li><img<br>
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li><br>
<li><img<br>
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li><br>
<li><img<br>
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li><br>
</ul><br>
<span style="color: rgb(204, 0, 0);"></div></span><br>
<br>
<br>
<br>
<div class="lititlemingbo161101"> 範例三:與表格的配合使用</div>
<br>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><img
style="width: 184px; height: 123px;" alt=""
src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg"><br>
</td>
<td style="vertical-align: top; width: 184px; text-align: right;"><br>
<br>
<div style="text-align: right;" class="ironcontentbo011101">夏日的台北</div>
<br>
<div class="ironcontentmi011101">
<div style="text-align: right;">天空和<br>
許多有顏色的物件,<br>
染著了莫名情緒為衣。<br>
</div>
</div>
</td>
<td style="vertical-align: top; width: 182px;">
<div style="width: 182px;">
<ul class="bxslider">
<li><img
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li>
<li><img
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li>
<li><img
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li>
<li><img
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">HTML碼:
如例二先設置div,和表格同寬</span></big><br>
<br>
<span style="color: rgb(204, 0, 0);"><div style="width: 182px;"></span><br>
<ul class="bxslider"><br>
<li><img<br>
src="https://c4.staticflickr.com/9/8234/28740131203_4dc518e85b_b.jpg"></li><br>
<li><img<br>
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></li><br>
<li><img<br>
src="https://c5.staticflickr.com/9/8072/28632690164_e18b5b5492_b.jpg"></li><br>
<li><img<br>
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></li><br>
</ul><br>
<span style="color: rgb(204, 0, 0);"></div></span><br>
<br>
<br>
<div class="lititlemingbo161101"> 範例四:多張圖顯示</div>
<br>
<div class="slider2">
<div class="slide"><img src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"></div>
<div class="slide"><img src="https://c6.staticflickr.com/9/8637/28854719061_2c5ac0918e_b.jpg"></div>
<div class="slide"><img src="https://c6.staticflickr.com/9/8842/28233257493_8c9bdfd372_b.jpg"></div>
<div class="slide"><img src="https://c7.staticflickr.com/9/8685/28629384750_97ab277e1a_b.jpg"></div>
</div>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">jQuery 以及 HTML碼</span></big><br>
<br>
<span style="text-decoration: underline;">jquery碼</span><br>
<br>
<script><br>
$(document).ready(function(){<br>
$('.slider2').bxSlider({<br>
slideWidth: 250,<br>
minSlides: 2,<br>
maxSlides: 2,<br>
slideMargin: 10<br>
});<br>
});<br>
</script><br>
<br>
<br>
<span style="text-decoration: underline;">HTML碼</span><br>
<br>
<div class="slider2"><br>
<div class="slide"><img
src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"></div><br>
<div class="slide"><img
src="https://c6.staticflickr.com/9/8637/28854719061_2c5ac0918e_b.jpg"></div><br>
<div class="slide"><img
src="https://c6.staticflickr.com/9/8842/28233257493_8c9bdfd372_b.jpg"></div><br>
<div class="slide"><img
src="https://c7.staticflickr.com/9/8685/28629384750_97ab277e1a_b.jpg"></div><br>
</div><br>
<br>
<br>
<br><br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com6tag:blogger.com,1999:blog-4179719354980918481.post-31603600344230552062016-10-23T20:07:00.002+08:002016-11-14T20:41:57.644+08:00影像的翻轉:互動模態<br>
<link rel="stylesheet"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/hint.css-master/hint.css">
<br>
<style>
#f1_container {
position: relative;
width: 450px;
height: 300px;
z-index: 1;
}
img#f1-pic01 {
width: 450pxp;
height: 300px;
}
img#f1-pic02 {
width: 450pxp;
height: 300px;
}
#f1_container {
perspective: 1000;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.6s linear;
}
#f2_container {
position: relative;
width: 450px;
height: 300px;
z-index: 1;
}
img#f2-pic01 {
width: 450pxp;
height: 300px;
}
img#f2-pic02 {
width: 450pxp;
height: 300px;
}
#f2_container {
perspective: 1000;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.6s linear;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back.center {
display: block;
transform: rotateY(180deg);
color: white;
background-color: #ADADAD;
}
.face.back.center >p:nth-of-type(1) {
width: 80%;
font-family: Verdana, '微軟正黑體';
font-size: 1.65em;
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.07em;
margin-top: 2em;
margin-bottom: 0.5em;
margin-left: 40px;
border-bottom: 1px solid white;
}
.face.back.center >p:nth-of-type(2){
width: 80%;
font-family: Verdana, '微軟正黑體';
font-size: 1.23em;
font-weight: normal;
line-height: 1.2;
letter-spacing: 0.1em;
margin-left: 40px;
}
div.bigword161023 {
width: 85%;
font-family: Verdana, '微軟正黑體';
font-size: 2.75em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.1em;
border-bottom: 1px solid gray;
color: #fff;
text-shadow: 1px 1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333;
}
div.bigcontent161023 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: normal;
line-height: 1.6;
letter-spacing: 0.1em;
padding-right: 15em;
background-image: url(https://lh3.googleusercontent.com/soQW2OUAg1-S6bG1d7F5kV9mS43t05x-kutvmozKsLi9ysf1laXt3TFAL9suB8sVQp6GWTFGL4bVpxg92ljrZxLZWneSdIaTBPDYh1KunOmRyoLJq-6CgOMyISWgDG01T2193LZunJDD1ztC1yknIMJ3Iii9__EhVnocp_Pp13fpwp5Ft0Mb4UQg6hC7r398WDGPT78KThbpNai7MHWod9JqI0UVbxK480019uFMKloZUsRd3F10j2ua_pddhr0QJPCdP6wkDP2Wk8aibdFTy1Uv17m5tazi3veX1ULV-1Tvaco4VElb3sap66hIQxgfQu-unlxipP7dS5Y0gSBusdGgld-YDVdPj7cCrMVD3uwWwbYEBk72_QgcYQeYt15gogi6ehPrtppwdRPe2vg5UZs4GM87hdZr479vOruWw5cWyCgfsyjnipq_Cn4eGnxiBTGWnoLDMXOcDuhIDrfRcfRduSzkwvit-fAWdLCFbQIeNxs2Y_gCuEgOrWQEgeE1nWicRxbeDO3ObjA9403E65Mf6mZRbdEuumkqQhJwruYr9F32xpA4PsfttRETk3q-8P-aIHzRISHEu97OBHNxfoFAjL1UuhaNCBISdD61NwvQMEQ5lg=s512-no);
background-repeat: no-repeat;
background-size: 240px;
background-position: right center;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
div.bigcontent161023:hover {
background-size: 190px;
background-position: right 50px top 5px;
}
div.midword161023 {
width: 85%;
font-family: Verdana, '微軟正黑體';
font-size: 1.35em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.07em;
border-bottom: 1px solid gray;
background-image:url(https://lh3.googleusercontent.com/soQW2OUAg1-S6bG1d7F5kV9mS43t05x-kutvmozKsLi9ysf1laXt3TFAL9suB8sVQp6GWTFGL4bVpxg92ljrZxLZWneSdIaTBPDYh1KunOmRyoLJq-6CgOMyISWgDG01T2193LZunJDD1ztC1yknIMJ3Iii9__EhVnocp_Pp13fpwp5Ft0Mb4UQg6hC7r398WDGPT78KThbpNai7MHWod9JqI0UVbxK480019uFMKloZUsRd3F10j2ua_pddhr0QJPCdP6wkDP2Wk8aibdFTy1Uv17m5tazi3veX1ULV-1Tvaco4VElb3sap66hIQxgfQu-unlxipP7dS5Y0gSBusdGgld-YDVdPj7cCrMVD3uwWwbYEBk72_QgcYQeYt15gogi6ehPrtppwdRPe2vg5UZs4GM87hdZr479vOruWw5cWyCgfsyjnipq_Cn4eGnxiBTGWnoLDMXOcDuhIDrfRcfRduSzkwvit-fAWdLCFbQIeNxs2Y_gCuEgOrWQEgeE1nWicRxbeDO3ObjA9403E65Mf6mZRbdEuumkqQhJwruYr9F32xpA4PsfttRETk3q-8P-aIHzRISHEu97OBHNxfoFAjL1UuhaNCBISdD61NwvQMEQ5lg=s512-no);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 35px;
}
div.bg16102301 {
background-color: lightgray;
}
</style>
<div class="bigword161023">影像的翻轉</div>
<br>
<div class="bigcontent161023">透過影像翻轉這樣的互動模態,影像可以傳達更多意義。這種意義遠遠超過單一以及靜止的影像
呈現。<br>
有想法的使用文本互動呈現,可以表達出傳統文本所無法帶出的意義呈現模式。這是網路互動文本為我們帶來的新挑戰,寫作上的新挑戰。<br>
</div>
<br>
<br>
<br>
<div class="midword161023">範例一:圖像與圖像的翻轉</div>
<br>
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face"> <img id="f1-pic01"
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></div>
<div class="back face center">
<img id="f1-pic02" style="padding: 0px; border: 0px solid gray;"
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></div>
</div>
</div>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">HTML碼:</span></big><br>
<br>
<span class="hint--left hint--warning" data-hint="共四個id">
<div id="f1_container"><br>
<div id="f1_card" class="shadow"><br>
<div class="front face"> <img id="f1-pic01"<br>
src="https://c8.staticflickr.com/9/8279/29282627391_634e02b687_b.jpg"></div><br>
<div class="back face center"><br>
<img id="f1-pic02"<br>
src="https://c3.staticflickr.com/8/7772/29147492562_2cc870640d_b.jpg"></div><br>
</div><br>
</div><br>
</span><br>
<hr style="width: 100%; height: 2px;"><br>
<br>
<br>
<div class="midword161023">範例二:圖像與文字的翻轉</div>
<br>
<div id="f2_container">
<div id="f2_card" class="shadow">
<div class="front face"> <img id="f2-pic01"
src="https://c7.staticflickr.com/9/8024/28901542670_ff22134ba2_b.jpg"></div>
<div class="back face center">
<p>標題</p>
<p>內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文</p>
</div>
</div>
</div>
<br>
<big><span style="text-decoration: underline; font-weight: bold;">HTML碼:</span></big><br>
<br>
<span class="hint--left hint--warning" data-hint="共三個id">
<div id="f2_container"><br>
<div id="f2_card" class="shadow"><br>
<div class="front face"> <img id="f2-pic01"<br>
src="https://c7.staticflickr.com/9/8024/28901542670_ff22134ba2_b.jpg"></div><br>
<div class="back face center"><br>
<p>標題</p><br>
<p>內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文</p><br>
</div><br>
</div><br>
</div><br>
</span><br>
<hr style="width: 100%; height: 2px;"><br>
<br>
<div class="midword161023">範例所用的 CSS:</div>
<br>
<style><br>
<div class="bg16102301"><span class="hint--left" data-hint="範例一,共七個id">#f1_container
{<br>
position: relative;<br><span style="color: red;">
width: 450px;<br>
height: 300px;<br></span>
z-index: 1;<br>
}<br>
<br>
img#f1-pic01 {<br><span style="color: red;">
width: 450pxp;<br>
height: 300px;<br></span>
}<br>
<br>
img#f1-pic02 {<br><span style="color: red;">
width: 450pxp;<br>
height: 300px;<br></span>
}<br>
<br>
#f1_container {<br>
perspective: 1000;<br>
}<br>
<br>
#f1_container:hover #f1_card
{
<br>
transform: rotateY(180deg);<br>
}<br>
<br>
#f1_card {<br>
width: 100%;<br>
height: 100%;<br>
transform-style: preserve-3d;<br>
transition: all 0.6s linear;<br>
}<br>
</span></div>
<br>
<div class="bg16102301"><span class="hint--left" data-hint="範例二,共七個id">#f2_container
{<br>
position: relative;<br><span style="color: red;">
width: 450px;<br>
height: 300px;<br></span>
z-index: 1;<br>
}<br>
<br>
img#f2-pic01 {<br><span style="color: red;">
width: 450pxp;<br>
height: 300px;<br></span>
}<br>
<br>
img#f2-pic02 {<br><span style="color: red;">
width: 450pxp;<br>
height: 300px;<br></span>
}<br>
<br>
#f2_container {<br>
perspective: 1000;<br>
}<br>
<br>
#f2_container:hover #f2_card {<br>
transform: rotateY(180deg);<br>
}<br>
<br>
#f2_card {<br>
width: 100%;<br>
height: 100%;<br>
transform-style:
preserve-3d; <br>
transition: all 0.6s linear;<br>
}<br>
</span></div>
<br>
.face {<br>
position: absolute;<br>
width: 100%;<br>
height: 100%;<br>
backface-visibility: hidden;<br>
}<br>
<br>
.face.back.center {<br>
display: block;<br>
transform: rotateY(180deg);<br>
color: white;<br>
background-color: #ADADAD;<br>
}<br>
<br>
.face.back.center >p:nth-of-type(1) {<br>
width: 80%;<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.65em;<br>
font-weight: bold;<br>
line-height: 1.8;<br>
letter-spacing: 0.07em;<br>
margin-top: 2em;<br>
margin-bottom: 0.5em;<br>
margin-left: 40px;<br>
border-bottom: 1px solid white;<br>
}<br>
<br>
.face.back.center >p:nth-of-type(2){<br>
width: 80%;<br>
font-family: Verdana, '微軟正黑體';<br>
font-size: 1.23em;<br>
font-weight: normal;<br>
line-height: 1.2;<br>
letter-spacing: 0.1em;<br>
margin-left: 40px;<br>
}<br>
</style><br>
<br>
<div class="midword161023">影音教學:</div>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lhIEeipa6wA?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<br>
<br>M.C. Leehttp://www.blogger.com/profile/10764099810829547356noreply@blogger.com0