*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2015年6月1日 星期一

快 速簡單又有變化: 標題內文式互動開合



快 速簡單又有變化
content slider / 互動式文字列表/摘要內文

這次的模組使用「表 格」來設計,在使用操作上更為簡單。一個更為便利的使用特色在於:可以用來處理互 動文字列表的需求,也可以用來表現互動摘要 /內文式的互動寫作呈現。
使用表格!

可以快速、直覺以
數位文本寫作思維
來對文本進行寫件布局。


這是標題/摘要(一)   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是標題/摘要(二)   [click]
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
這是內文。這是內文。
2017出版。本書更深刻地探討數位文本的文本理論。
購買:五南書局



jQuery的互動程式組,請放置於<haed></head>之間或<body>之後:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<script>
$(function() {
$('#ta052901').find('>tbody >tr:even >td').click(function() {
$(this).parent().next().children().toggle('slide', {direction: 'left'}, 800);
});
});

</script>

說明:
一、紅色字體為表格內所設的id。
二、藍色字體為滑動的方向,可設 up / down / left / right ,四選一。
三、褐色字體者,為滑動速度,1000是一秒。



CSS的語法,請放置於<haed></head>之間或<body>之後:

<style>
/* 標題列的TD之CSS,請放置於TD */
.title0529 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
cursor: pointer;
}

/*標題背景色互動*/
.title0529:hover {
background-color: rgba(152, 152, 152, 0.4);
}

/* 內文列的TD之CSS,請放置於TD */
.word0529 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
}

/* 讓內文列消失之CSS,請放置於TABLE */
.tabdispnone >tbody >tr:nth-child(even) >td {
display: none;
}
</style>



教學影音:




沒有留言:

張貼留言