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

2016年11月29日 星期二

精準控制互動物件:CSS選擇器:自身、父子、兄弟關係選擇



CSS:hover 各種表現形式及轉場動態

CSS:hover可以有互動效果,加上父子、兄弟關係的運用,最後再附上轉場效果,就有能讓你驚豐的視覺豐富感。更重要的是,這一方法可以讓使用者有著 強大的思考空間,來創作。

教學影音 click!!


CSS:hover  自身互動
互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007:617)。

css碼:

<style>
.hoverself1129 {
}

.hoverself1129:hover {
background: rgba(92, 173, 173, 0.6);
}
</style>


CSS:hover  父子關係
互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007: 617)。

css碼:

<style>
.hoverself112902 {
}

.hoverself112902:hover >span {
color: red;
font-weight: bold;
}
</style>


教學影音 click !


CSS:hover  兄弟關係
互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007: 617)。

<style>
.hoverbro1129 {
border-left: 2px solid transparent;
}

.hoverbro1129:hover +div {
border-left: 2px solid darkred;
padding-left: 2em;
}
</style>

補充說明:當中間有 <br>段行空白,請加+br

.hoverbro1129:hover +br +br +div {
color: red;
}


補充說明:想要有動態效 果,請加入下列css碼

-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
transition: 1s;


創作範例:





CSS碼:

<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;
}

.tdimgup1129:hover >img {
top: -15px;
}

</style>





2016年11月1日 星期二

bxSlider 快速使用:2016年版



可快速使用的content slider。
同時又可以依創作者的要求,快速地
來做出不同小大樣態的互動媒材。

教學影音


一、把下列程 式碼copy到<head>xxx</head>之間(課堂建議)或<body>之後:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
 
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js">
</script>
<link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>



範例一:就直接使用。


HTML碼:

<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來設置大小


HTML碼:


<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>



 範例三:與表格的配合使用




夏日的台北

天空和
許多有顏色的物件,
染著了莫名情緒為衣。

HTML碼: 如例二先設置div,和表格同寬

<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>


 範例四:多張圖顯示


jQuery 以及 HTML碼

jquery碼

<script>
$(document).ready(function(){
  $('.slider2').bxSlider({
    slideWidth: 250,
    minSlides: 2,
    maxSlides: 2,
    slideMargin: 10
  });
});
</script>


HTML碼

<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>