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>

說明：
１、本範例所預計使用之Class名稱：  tddivho0325
２、eq() 的計算，是從「0」開始的，0,1,2,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)'
            }
        }
    }

教學影音：


2 則留言: