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";
October 9, 2011
Mouseinfobox plugin for jQuery下載相關檔案
<link rel="stylesheet" href="jquery.mouseinfobox.css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mouseinfobox.js"></script>
<script>
$(function(){
$('.class名').infoBox({
animation: ['opacity', 'bottom'], //動畫 透過與位置
animDuration 200, //動畫速度
offsetX: 20, //x位置
offsetY: -20, //y位置
bottomPos: true, //從bottom顯示
rightPos: false //從right顯示
});
});
</script>
以及在class名上顯示的內容於title上記述。
<div class="class名" title="ツールチップテキスト">テキスト</div>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mouseinfobox.js"></script>
<script>
$(function(){
$('.class名').infoBox({
animation: ['opacity', 'bottom'], //動畫 透過與位置
animDuration 200, //動畫速度
offsetX: 20, //x位置
offsetY: -20, //y位置
bottomPos: true, //從bottom顯示
rightPos: false //從right顯示
});
});
</script>
以及在class名上顯示的內容於title上記述。
<div class="class名" title="ツールチップテキスト">テキスト</div>
October 6, 2011
