*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2017年7月19日 星期三

手工自製的文 創式 content slider




手工自製的文 創式 content slider
手工
自製
文創式
自由思考
完全想像

這才是寫作
Content Slider
by 編輯老師



數位文本。在互動文本建置的思考上,要能是隨心所欲的,才能是一種「寫作狀態」。 寫作者不能被技術上的障礙,扞擾了對內容表現上的構思。我們思考的不是技術上的完整性,而是表現上的自由度!




範例一
範例二





 
★ 範 例一:

互動文本結構:
上方的文字列,是用ol/li 技法來形成。
下方是設定div,裡面再分別設置三個內文div。
使用簡單的程式,來讓兩者形成互動的文本呈現關係。

設置分解動作:
一、用ol/li寫作互動導文。
二、為ol/li設置CSS,以形成ol/li的呈現樣態。
三、設置內文DIV。
四、在內文DIV內,再設置要互動的DIV。內容寫在此DIV。
五、為互動導文設置互動功能,onclick=" "。


  1. 波 妞的意識圖像
  2. 說 明:來我們家的歷史
  3. 在 影音中的生活



她是來我們家的驕客。



它是米克思
被收養的日子,忘了。

太太,女兒的決定。
老樣子,
我是賺錢、司機和逗貓的執行者。








它都去梁動物醫院看病。
平常不太愛用「高級品」。
網上購物的紙箱是最受歡迎的「戰利品」。

人與寵物之間的感情,是一種形上學的議題。溝通的方式是不同的,但感情是觸動同溫。





來到我們家的第一天,我們拍起來做紀念!




CSS語法:

<style>

/* 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: translateY(-5px);
}

/* 內容div的設定 */
#consli20170718 {
border: 1px solid black;
}

/* 內容div之內的div之設定 */
#consli20170718 >div:not(:first-of-type) {
display: none;

}

</style>


jQuery 語法:

/* 啟動 jQuery*/
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

/* 產生ol/li互動效果的 jQuery*/
onclick = "  $(this).siblings().removeClass('chandiv').end().addClass('chandiv');  "

/* 產生div互動效果的 jQuery*/
onclick = "  $('#consli20170718').find('div').css('display', 'none').eq(0).show('slide', {direction: 'left'}, 800);  "

說明:
一、/* 產生div互動效果的 jQuery*/的程式碼中,大紅字 0 是指第一個div,如果是設定的二個div,要改寫成 eq(1)  ,依此類推。請參考教學影音。
二、div移動方向可以有四種,left, right, up, down ,請依需要改定。


影音教學:






 
★ 範 例二

這是上一例的變形。
ol/li的寬度縮小,於是就形成長條狀的文字說明。
再移動它,來和Div的內文區重疊,就會形成如下的效果。



1


2


3


4



  1. 觀 霧
  2. 藍 雲
  3. 綠 影
  4. 驕 陽



CSS 語法:

<style>

/* ol的設定 */
.olliconsli2017071802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}

/* li的設定 */
.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;
}

/* ol互動的設定 */
.olliconsli2017071802 >li:hover {
background-color: rgba(152, 152, 152, 0.8);
color: white;
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}

/* 按下li之後的互動變化 */
.chandiv02 {
border-radius: 25px;
border: 1px solid red;
transform: translateX(-10px);
}


/* 內容div的設定 */
#consli2017071802 {
border: 1px solid black;
}

/* 內容div之內的div之設定 */
#consli2017071802 >div:not(:first-of-type) {
display: none;
}

</style>


jQuery 互動語法:

/* 啟動 jQuery;如果下二條已有被使用,就可以省略。一網頁中,只要出現一次就可以*/
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


/* 產生ol/li互動效果的 jQuery*/
onclick = "  $(this).siblings().removeClass('chandiv02').end().addClass('chandiv02');  "

/* 產生div互動效果的 jQuery*/
onclick = "  $('#consli2017071802').find('div').css('display', 'none').eq(0).show('slide', {direction: 'left'}, 800);  "


影音教學:








沒有留言:

張貼留言