手工自製的文 創式 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);  "


影音教學：