PetHouse(2016)練習2

範例結果

七、news_最新消息的輪播

BS:【元件Components】>【媒體物件Media object】>【媒體對齊Media alignment】

確認項目:

(一)Html結構及CSS美化

在【.container】之下加入【id=”newsList】

<div class="container">
<div class="media">
<a class="media-left media-middle" href="#">
<img src="img/pet/pet01.png" alt="台灣土狗">
</a>
<div class="media-body">
<h4 class="media-heading">1.台灣土狗<span>聰明且堅毅不屈不撓</span></h4> 台灣犬,是一種台灣高海拔地區原住民飼養的獵犬,屬於一種半野生的品種。他們非常適應台灣崎嶇不平的地形以及茂密的叢林,台灣土狗是相當聰明並且有著堅毅不屈不撓,加上忠貞的天性使它們成為優秀的警衛犬。
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img src="img/pet/pet02.png" alt="威爾斯柯基犬">
</a>
<div class="media-body">
<h4 class="media-heading">2.威爾斯柯基犬<span>大力士般的小型犬</span></h4> 柯基可愛度非常高又很聰明,聰明的牠因下盤較低、身軀嬌小,所以可以發揮極佳的速度與耐力敏捷穿梭在牛群中,並鉗住牛下肢,控制牠們的行動,是隻如大力士般的小型犬,但卻因為有雙層毛,所以非常容易掉毛的狗狗,需要常常清理!
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img src="img/pet/pet03.png" alt="紅貴賓">
</a>
<div class="media-body">
<h4 class="media-heading">3.紅貴賓<span>神秘高貴有氣質</span></h4> 玩具貴賓狗給人神秘高貴有氣質感,大膽、有勇氣、精力充沛、獨立心很強、悠然自得、很黏人也討人喜歡,研究顯示紅貴賓可是小型狗中最~聰明的種類,也是陪伴犬的第一選擇
<br>如果想要養隻可以輕鬆教會牠的狗狗的話,紅貴賓可能是你的選擇之一唷!
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img src="img/pet/pet04.png" alt="柴犬">
</a>
<div class="media-body">
<h4 class="media-heading">4.柴犬<span>性格沉穩、忠於主人、地域觀念強</span></h4> 柴犬能巧妙地穿過雜木幫助打獵,而且紅褐色的毛色與枯萎的柴相似,故名。
<br>犬性格沉穩、忠於主人、地域觀念強。主人以外之人不易親近,不隨便吠叫,這是目前在日本飼養最多的犬種。
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img src="img/pet/pet05.png" alt="臘腸犬">
</a>
<div class="media-body">
<h4 class="media-heading">5.臘腸犬<span>聰穎又貼心的調皮性格,有領導能力</span></h4> 勇敢、刻苦、忍耐的特點、貪玩的脾氣及親和力強,擁有聰穎又貼心的調皮性格,有領導能力,
<br>不需要花太多精神去照顧的犬種,天性樂觀的牠是屬於容易肥胖的
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img src="img/pet/pet06.png" alt="博美">
</a>
<div class="media-body">
<h4 class="media-heading">6.博美<span>性格細膩愛撒嬌</span></h4> 博美犬的個性較細膩敏感,對周遭動靜的反應較為敏感,非常容易興奮,也比較神經質,
<br>所以如果是住在公寓的人們需要三思而後行阿!免得吵到旁邊鄰居唷!
</div>
</div>
</div>
.media img { width: 80px; height: auto;}
.media-heading span { font-size: .6em; color: #900037;}
.media { border-bottom: 1px solid #795548;}

(二)JQ第一階段設定

學習目標:JQ中 clone()方法jQ prependTo() 方法JS計時事件

function newsScroll(){
// 先找出最後一個 media ,並宣告變數 方便程式簡化
var $newsLast = $('#newsList div.media:last-child');
//將最後一個media > 複製一個 > 隱藏 > 加入至第一個.media > 淡出
$newsLast.clone().hide().prependTo('#newsList').fadeIn(1000,function(){
setTimeout(newsScroll,1000);
});
$newsLast.remove();
}
//啟動輪播
setTimeout(newsScroll,1000);         

(三)JQ第二階段設定

訊息是突然就跳插進去的,感覺不是那麼滑順。這是因新項目會把整個#newsList 往下擠,且被附加的項目一開始又是隱藏的,所以才會看到突然跳插的畫面。

學習目標:JQ中對物件大小定義(參考連結)、jQuery animate() 方法jQuery 效果-動畫

#newsList { position:relative;}
function newsScroll() {
// 先找出最後一個 media ,並宣告變數 方便程式簡化
var $newsLast = $('#newsList .media:last-child');
// 先取得 #newsList 最後.media高度
var $scrollHeight = $newsLast.outerHeight(true);
// alert($scrollHeight);
// 先把 #newsList 往下移
$('#newsList').animate({ top: $scrollHeight + 'px' }, 1000, function () {
//將最後一個media > 複製一個 > 隱藏 > 加入至第一個.media > 淡出
$newsLast.clone().hide().prependTo('#newsList').fadeIn(1000, function () {
setTimeout(newsScroll, 1000);
});
// 馬上把 #news 移到 top 等於 0 的位置
$('#newsList').css('top', 0);
// 把$newsLast 移除掉
$newsLast.remove();
});
}
// 啟動輪播計時器
setTimeout(newsScroll, 1000);

(四)jQuery 添加元素方法

參考連結:jQuery – 添加元素jQuery HTML / CSS 方法

//#ul1
$('#ul1').append('<div class="insObj">我是append加入的</div>');
$('#ul1').prepend('<div class="insObj">我是prepend加入的</div>');
$('#ul1').before('<div class="insObj">我是before加入的</div>');
$('#ul1').after('<div class="insObj">我是before加入的</div>');

//#ul2
$('<div class="insObj">insertBefore:元素之前加入</div>').insertBefore('#ul2');
$('<div class="insObj">insertAfter:元素之後加入</div>').insertAfter('#ul2');
$('<div class="insObj">prependTo:元素之前加入</div>').prependTo('#ul2');
$('<div class="insObj">appendTo:元素之前加入</div>').appendTo('#ul2');

//section:nth-child(3) h1
//$('#h1').insertAfter('#ul3');
//$('#h1').insertBefore('#ul3');
//$('#h1').prependTo('#ul3');
//$('#h1').appendTo('#ul3');