goTOP
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>

また、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>

剩下紀錄於HTML中
<ul id="id名">
  <li>1</li>
  <li>2</li>
  <!-- 以下個数分 -->
</ul>


下載:
下載相關檔案

下載相關檔案
October 20, 2011
建立了粉絲專業後,我們就會有看到以下的內容,
前提是你要建立以下資料:

粉絲專頁>編輯專頁>基本資料>短網址

點擊在新視窗中瀏覽此圖片


粉絲團設定成功,就會出現以下的畫面:
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";
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>

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>

<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>


速度可至 islider.js 中調整

Demo:
http://apao.zapto.org/~apao/
August 31, 2011
點擊在新視窗中瀏覽此圖片
▲當頁面讀進來時,像是上下開啓的門,並做淡入的功能

IntroTzikas - Animated Intro - jQuery Plugin 下載以下需要的 js
分頁: 9/12 第一頁 上頁 4 5 6 7 8 9 10 11 12 下頁 最後頁 [ 顯示模式: 摘要 | 清單 ]