採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
December 8, 2020
客戶通常不在網站初期建立時提出需求，往往都在完成後才有意見，尤其碰到客戶千奇百怪的需求，都是十分具有挑戰性。今天來說明如何利用免費軟體，將兩張圖檔放置於一個圖檔內完成上傳。也能符合RWD的規範。
▼客戶需求將兩張圖直放
▼客戶需求將兩張圖直放
August 26, 2020
如果有個圖片檔案文字很多，又需要放大時，可以在PC版或是手機版上做圖片放大動作。方法如下：
▼PC 版 / 電腦版：按圖片上方按右鍵，開啟圖檔在新的頁簽中（瀏覽器：Chrome）
▼PC 版 / 電腦版：開啟新頁簽後，再點擊圖片，就能使圖片放大（瀏覽器：Chrome）
▼PC 版 / 電腦版：按圖片上方按右鍵，開啟圖檔在新的頁簽中（瀏覽器：Chrome）
▼PC 版 / 電腦版：開啟新頁簽後，再點擊圖片，就能使圖片放大（瀏覽器：Chrome）
October 11, 2011
DEMO
程序說明
原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。
首先需要一個容器，程序會自動設置容器overflow為hidden，如果不是相對或絕對定位會同時設置position為relative，
滑動對象會設置為絕對定位：
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";
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/
