<!--按下two連結-->
<a href="#two">go two</a>
<!--這裡必須預留比瀏覽器高的空間-->
<!--會捲至two的位置-->
<h1 id="two">

<script type="text/javascript" src="{js}/jquery.js"></script>
<script type="text/javascript" src="{js}/ui.core.js"></script>
<script type="text/javascript" src="{js}/jquery.scroll-follow.js"></script>
<script type="text/javascript">
$( document ).ready( function (){
  $('#sideBar').scrollFollow({});
});

//option
$( document ).ready( function () {
  $( '#sideBar' ).scrollFollow( {
    speed: 2000,
    offset: 0,
    killSwitch: 'exampleLink',
    onText: 'Disable Follow',
    offText: 'Enable Follow'
  } );
} );
</script>

<script type="text/javascript" src="js/footerFixed.js"></script>

<div id=footer></div>

#id名 {
  width:296px;
  height:130px; //半分の高さ
  position:relative;
  overflow:hidden;
}

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#id名 a").hover(function(){ //id之下 a:hover 的動作
    $("img", this).stop().animate({top:"-130px"},{duration:200}); //從top位置-130px距離 以200ms 速度移動至0px位置
  }, function() { //マウスが外れた時
    $("img", this).stop().animate({top:"0px"},{duration:200});//從top位置0px回原位 以200ms 速度移動
  });
});
</script>

<style>  
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('li a')
    .css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
    .mouseover(function(){
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
      //マウスオーバー時に縦位置94pxに0.5秒かけて移動
    })
    .mouseout(function(){
      $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
      //マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
        $(this).css({backgroundPosition: "-20px 35px"})
        //移動完了後、元の位置に戻す
      }})
  })
});
</script>

<ul id="demo">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>

  $('#a a')
    .css( {backgroundPosition: "-20px 35px"} )
    .mouseover(function(){
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
    })
    .mouseout(function(){
      $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
        $(this).css({backgroundPosition: "-20px 35px"})
      }})
    })

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

<ul class="nav nav1">
    <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>

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

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

<script src="<階層>/jquery-1.5.1.min.js" type="text/javascript"></script>  
<script src="<階層>/introtzikas.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  $().introtzikas({
     line: '#FFF', //線的顏色
     speedwidth: 3000, //橫幅移動完成的速度
     speedheight: 2000, //高度移動的速度
     bg: 'red' //背景色
  });
});
</script>