| 網頁程式寫作 |
完全DIY |
快速隨意的自製出 image
gallery
Schneider 老鏡，是我最喜的老鏡頭！
柔和、與世無爭、甜淡、純顏色的一種姿態呈現。
Canon 5D + schneider 50mm f2.8 M42 。click more…▼
123 456 789 101112 範例後的文字
寫作語法範例：
<div style="width: 576px; height: 384px;"
onclick="$(this).myPlugin20170720();" class="idoitimgga20170719">
<img
style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4309/35183964774_76cfb39f64_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4304/35981836736_be0d486a4a_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4323/35183956484_58fc3cd977_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4208/35836631096_60e8ee7fea_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4279/35067718253_93b04e03d6_o.jpg"><br>
</div>
發想概念：
一、請設定出想要大小的DIV。並設定寬、高。
二、DIV的大小，一定要和展現的照片之大小，一致。
三、請在DIV內不斷的加入照片，請隨意的加入數量。
四、請在DIV內套入下列的CSS。
五、請copy寫入下列程式碼。
六、請在DIV內，設定 onclick 功能，如下例。
jquery 程式碼：
/* 如果已有使用下列二條設定jquery環境的程式碼，就可不必使用。 */
/* 請copy 到<head> </head>或<body>之後 */
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
這一範例的jquery 碼：
/* 請copy 到<head> </head>或<body>之後 */
<script>
(function( $ ){
var numberca20170720 = 1;
$.fn.myPlugin20170720 = function() {
// 你的Plugin內容寫在這裡面。
var numgapic = $(this).find('>img').size();
var realnum = numgapic - numberca20170720;
if (realnum != 0) {
$(this).find('>img').eq(realnum).hide('slide', {direction: 'left'}, 600);
numberca20170720 = numberca20170720 + 1;
}
else {
$(this).find('>img').show('slide', {direction: 'right'}, 600);
numberca20170720 = 1;
}
};
})(jQuery);
</script>
設定「按下去 的地方」的onclick互動碼：
/* 請設定在DIV裡 */
onclick = ' $(this).myPlugin20170720(); '
CSS語法：
/* 請套入到 div 裡 */
<style>
.idoitimgga20170719 {
position: relative;
border: 1px solid black;
}
.idoitimgga20170719 >img {
position: absolute;
top: 0px;
left: 0px;
}
</style>
教學影音：
沒有留言:
張貼留言