January 2, 2012
從jQuery WebTicker 下載 jquery.webticker.js
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id名").webTicker({
travelocity: 0.1, //速度
direction: 1, //-1で逆向
})
});
</script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id名").webTicker({
travelocity: 0.1, //速度
direction: 1, //-1で逆向
})
});
</script>
また、CSS內容記載如下
<style>
.tickercontainer { //電子看板的大小設定
width: 500px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask {
position: relative;
top: 8px;
height: 18px;
overflow: hidden;
}
ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}
ul.newsticker li {
float: left;
margin: 0;
padding-right: 15px; //要素間的余白
}
</style>
.tickercontainer { //電子看板的大小設定
width: 500px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask {
position: relative;
top: 8px;
height: 18px;
overflow: hidden;
}
ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}
ul.newsticker li {
float: left;
margin: 0;
padding-right: 15px; //要素間的余白
}
</style>
剩下紀錄於HTML中
<ul id="id名">
<li>1</li>
<li>2</li>
<!-- 以下個数分 -->
</ul>
<li>1</li>
<li>2</li>
<!-- 以下個数分 -->
</ul>
下載:
下載相關檔案
下載相關檔案
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>
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/
August 31, 2011
July 29, 2011
demo:jQuery Bubble Popup
這個是以事前指定氣球出現的說明文字但是不是在(TITLE)上指定。可更改淡入淡出的方式,也可更改氣球的顏色,說明文字的多寡,氣球會自動調整。由於淡入淡出的方式,不會影響畫面整體的感覺。
下載點:
http://plugins.jquery.com/project/jqBubblePopup