採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
December 26, 2014
兩張圖檔方式 w224 x h152 px
範例連結：
http://goo.gl/iw2C8F
註：開啟後，檢視原始碼。
範例連結：
http://goo.gl/iw2C8F
註：開啟後，檢視原始碼。
<style type="text/css">
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}
#bButton a:hover {
background-image: url(img/b.png);
}
</style>
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}
#bButton a:hover {
background-image: url(img/b.png);
}
</style>
September 5, 2011
▲ 這是讓圖檔可以由右至左移動，並替換的功能
下載相關檔案 iSlider - Photo Slider - jQuery Plugin
<link rel="stylesheet" type="text/css" href="islider.css" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="islider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().islider();
});
</script>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="islider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().islider();
});
</script>
<div class="window">
<div class="islider"><img src="1.jpg" /></div>
<div class="islider"><img src="2.jpg" /></div>
<div class="islider"><img src="3.jpg" /></div>
<!-- 以下画像分 -->
</div>
<div class="islider"><img src="1.jpg" /></div>
<div class="islider"><img src="2.jpg" /></div>
<div class="islider"><img src="3.jpg" /></div>
<!-- 以下画像分 -->
</div>
速度可至 islider.js 中調整
Demo:
http://apao.zapto.org/~apao/
July 8, 2011
這是用一張紙做為環保的廣告，利用手扶梯上下來回的方向，用一張廣告做最大的效用，不僅不會讓人亂丟，還真是環保。
