<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.flashyNav.1.0.js"></script>

<script type="text/javascript">
$(function(){
  
  $('.nav1').flashyNav({
    rolloverColor: '#5400ff',  //the default color of the rollover element
    rolloverDuration: 1000,  //the default duration for the rollover
    easingMethod: 'easeInOutQuint'  //easing method used for animation
  });
  
  $('.nav2').flashyNav({
    rolloverColor: '#00d2ff',  //the default color of the rollover element
    rolloverDuration: 800,  //the default duration for the rollover
    easingMethod: 'easeOutBounce'  //easing method used for animation
  });

  $('.nav3').flashyNav({
    rolloverColor: '#a800ff',  //the default color of the rollover element
    rolloverDuration: 800,  //the default duration for the rollover
    easingMethod: 'easeOutElastic'  //easing method used for animation
  });
  
});
</script>

<style type="text/css">
  
  * {margin:0; padding:0}
  body {background: #000; color:#fff; margin:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px}
  a {color:#fff}
  
  ul.nav {list-style:none; margin:20px; width:300px; font-size:10px; font-family:Arial, Helvetica, sans-serif; font-weight:bold}
  ul.nav li {position:relative; border-bottom:1px solid #333; display:block; height:30px; overflow:hidden}
  ul.nav li a {position:relative; color:#fff; text-decoration:none; display:block; height:20px; padding:10px 0 0 10px; z-index:100; text-transform:uppercase}
  
</style>

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

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

<ul id="id名">
  <li>1</li>
  <li>2</li>
  <!-- 以下個数分 -->
</ul>

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

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

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