數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2013年12月22日 星期日

超有氣質的圖文互動整合




那隻大貓
  • 她總喜歡在這個地點和角度,靜靜的在看著人在家中的走動。
貓科的威嚴
  • 獅子和她是同一種性的;但她的那種威嚴只能用來抗議。
守護神
  • 只要我一離開位置,她馬上佔據。「不要再寫paper了」,她表情如是說。


1.請貼入下列語法於<head>xxx</head>之間或<body>之後
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/js/jquery.bgImageMenu.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/js/jquery.easing.1.3.js"></script>
2.請貼入下列驅動語法於<body>之後
<script>
$(function () {
$('#sbi_container').bgImageMenu({
defaultBg : '開頭照片網址',
menuSpeed : 300,
border : 1,
width : 580,
height : 386 ,

type : {
mode : 'verticalSlideAlt',
speed : 450,
easing : 'easeOutBack'
}
});
});
</script>
3.請於<body>之後貼入CSS
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/SlidingBackgroundImageMenu/css/sbimenu.css"
media="screen">

<style>
.sbi_content ul li{
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 160%;
text-align: left;

background: rgba(105,105,105,0.6);
height: 100px;

}
</style>
4.請於欲出現的編輯區貼入HTML
<div id="sbi_container" class="sbi_container">
<div class="sbi_panel"
data-bg="第一照片網址"><a
href="#" class="sbi_label">第一標題 </a>
<div class="sbi_content">
<ul>
<li>第一內文 <br>
</li>
</ul>
</div>
</div>
<div class="sbi_panel"
data-bg="第二照片網址">
<a href="#" class="sbi_label">第二標題</a>
<div class="sbi_content">
<ul>
<li>第二內文<br>
<br>
</li>
</ul>
</div>
</div>
<div class="sbi_panel"
data-bg="第三照片網址">
<a href="#" class="sbi_label">第三標題</a>
<div class="sbi_content">
<ul>
<li>第三內文<br>
</li>
</ul>
</div>
</div>
</div>


注意:一但設定圖文框的寬度、高度值之後,要放進去的圖片也要剪裁成同樣大小的照片,這樣照片才能完整的呈現出來。


原始語法來源:Sliding Background Image Menu


4 則留言:

  1. 老師您好 我實作之後 發現 在chrome預覽下ok
    可是一上傳後 就無法正常顯示 請問有哪位同學碰過這現象嗎
    還請多多指教 謝謝

    回覆刪除
    回覆
    1. 有,有 一些同學上傳到dropbox之後,也會出不來。
      但如果上傳到一般的ftp,是ok的

      刪除
    2. 貼了網址之後 圖還是出不來
      其他都正常,試了好多次了

      刪除
  2. 那可能是圖檔沒有設定為公開public,所以出不來

    回覆刪除