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

2016年3月25日 星期五

滑鼠滑入圖,跑出圖說。快速!



使用 jQuery 方法
使用 CSS:hover 方法



會滑動的互動圖說。
超快速使用的圖文互動!一次設定就可以到處用,任意用!


這是中標↗


設置jQuery環境程式碼,請放於<body>之後:

 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


互動模式驅動程式,請放<body>之後:


<script>
$(function() {
$('td.tddivho0325').hover( function(){
$(this).find('>div').eq(1).slideDown(800);
},
function(){
$(this).find('>div').eq(1).stop().slideUp(800);
});
});
</script>

說明:
1、本範例所預計使用之Class名稱:  tddivho0325
2、eq() 的計算,是從「0」開始的,0,1,2,3...
3、只要設定class,本範例可以重覆使用。

教學影音:



影音中所用之CSS:

<style>
/* 插入背景圖*/
.tablebacimg {
background-image: url(https://farm2.staticflickr.com/1679/25071374830_e6a9cb1b29_b.jpg);
baackground-repeat: no-repeat;
background-size: 640px;
}

/* 基本中標(粗)*/
.ironcontentbo0325 {
font-family: Verdana, '微軟正黑體';
font-size: 1.05em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 0.4em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

/* 基本黑體內文 */
.ironcontentno0325 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.4;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

/* 使div消失 */
.disnone0325 {
display: none;
}

</style>




使用CSS:hover 的互動方法




這是中標
這是內文。
這是內文的文字。這是內文。
這是內文的文字。


<style>
.backimg1214 {
background-image: url(照片網址);
background-repeat: not-repeat;
background-size: 500px;
}

table.backimg1214 >tbody >tr >td >div:nth-of-type(2) {
overflow: hidden;
height: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

table.backimg1214:hover >tbody >tr >td >div:nth-of-type(2) {
height: 55px;
border: 1px solid darkorange;
}


/* 表格內div中標(粗)*/
.ironcontentbo121214 {
font-family: Verdana, '微軟正黑體';
font-size: 1.05em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 0.4em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

/* 表格內div黑體內文 */
.ironcontentno161214 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.4;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

</style>

影音教學:





2016年3月22日 星期二

(2016年)fancybox:一次設定多次使用


按,跳出圖片
按,跳出video
按,跳出DIV圖文框


這是2016年重寫的版本。

fancybox更簡單!更方便!
只要設定一次後,即可多次依自己的特定需求而被重複的使用。
圖片、影音以及圖文框都可暢快使用!

 


一、讓圖片跳出來


請 按文字一    請 按文字二   請 按文字三

請按下面圖片



jQuery及fancybox的程式碼,請放於<head>xxx</head>之間:


<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>


特別小心提醒:

如果 <script src="http://code.jquery.com/jquery-1.12.4.js"></script> 這一條,因其他互動模組之使用,而早已經有被使用了。就請不要再用了,可以直接一整條(紅色部分)的刪掉。一個網頁作品中,只要有一條即可。請保留最早出 現的那一條。


圖片跳出的驅動程式碼,請放於<head>xxx</head>之間:


<script>
function fancyboximg(w0321, h0321, s0321, t0321) {
$.fancybox({
fitToView: false,
beforeShow: function () {
this.width = w0321;
this.height = h0321;
},
href: s0321,
title: t0321,
type: 'image',
padding: 5,
openEffect: 'elastic',
preload: true
});
};
</script>


要按下去地方(文字/圖片)的javascript:


onclick="  fancyboximg(寬度, 高度, '圖片網址', '這是圖說');  "

範例:
onclick=" fancyboximg(600, 450, 'https://farm2.staticflickr.com/1638/24776435164_5602003cf9_b.jpg', '這是圖說'); "



教學影音:


說明:
手型滑鼠的CSS: cursor: pointer; 




二、讓影音跳出來


請 按文字;我來講《論語》

請按下面圖片



jQuery及fancybox的程式碼,請放於<head>xxx</head>之間:


<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>


影音跳出的驅動程式碼,請放於<head>xxx</head>之間:


<script>
function fancyboxvideo(w0411, h0411, s0411, t0411) {
$.fancybox({
width: w0411,
height: h0411,
href: s0411,
title: t0411,
type: 'iframe',
padding: 5,
openEffect: 'elastic',
preload: true,
 helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.65)'
            }
        }
    }
});
};
</script>


要按下去地方(文字/圖片)的javascript:


onclick="  fancyboxvideo(寬度, 高度, '影片來源', '影片說明');  "

範例:
onclick=" fancyboxvideo(560, 315, 'https://www.youtube.com/embed/HV53jiiSFZk?rel=0', '這是影片說01'); "



教學影音:




三、讓DIV圖文框跳出來


請按文字;跳出DIV說明

請按下面div
這裡是一個DIV,請按我。


jQuery及fancybox的程式碼,請放於<head>xxx</head>之間:


<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>


DIV圖文框跳出的驅動程式碼,請放於<head>xxx</head>之間:


<script>
function fancyboxdiv(i0415, t0415) {
$.fancybox({
href: i0415,
title: t0415,
type: 'inline',
padding: 5,
openEffect: 'elastic',
preload: true
});
};
</script>


要按下去地方(文字/圖片/div)的javascript:


onclick="  fancyboxdiv('#idnamne', 'div說明');  "



教學影音:







要跳出的圖文框之設定: 就是做出一個你想要的DIV內容。如下:

很難想像的在冬天,
一種不可思議的
天空顏色。
恰似在對人的一種擁抱。


<div class="fancyboxinline" id="a0415"><br>
很難想像的在冬天,<br>
一種不可思議的<br>
天空顏色。<br>
恰似在對人的一種擁抱。<br>
</div>


<style>
.fancyboxinline {
width: 420px;
height: 270px;
background-image: url(https://farm2.staticflickr.com/1461/25380866326_769cebf322_b.jpg);
background-repeat: no-repeat;
background-size: 360px;
background-position: top left;
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
padding-right: 0.5em;
border: 1px solid gray;
}
</style>


注 意! 讓div消失的CSS: display: none;




補充說明: overlay 的語法


<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/helpers/jquery.fancybox-media.js"></script>


helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.95)'
            }
        }
    }

教學影音: