<div ID="track1" STYLE="width:200px;background-color:#aaa;height:5px;">

    <div ID="handle1" STYLE="width:5px;height:10px;background-color:#f00;"> </div>

</div>

<script>

 new Control.Slider('handle1','track1',{

      sliderValue:0.5,

      onSlide:function(v){$('debug1').innerHTML='slide: '+v},

      onChange:function(v){$('debug1').innerHTML='changed! '+v}});

</script>

Effect效果对象

下拉效果&上拉效果

Effect.BlindDown('d1',{})函数的花括号里面{}可以跟参数：

如果想让一个Div开始的时候隐藏，点击下拉的时候才拉下，那么只需要将此Div的属性设为：display: none

上滚&下滚效果

这一组函数:

Effect.SlideUp('d1',{});

Effect.SlideDown('d1',{});

这组函数效果与Blind那一组基本一样，效果粗看起来差不多……我也是细心比较才发现的。原来Blind这一对内容是不会随着上拉或下拉而动的。而Slide中的内容会被拉上或拉下。

变色闪动效果

Effect.Highlight('d1',{duration:1.5})

此元素将会改变几次颜色并最终返回原来的颜色。

渐变显示效果

Effect.Appear(‘d1’,{})

原来的元素初始CSS为display:none,用此效果后渐渐显示，渐变的alpha滤镜效果。

膨胀消失效果

Effect.Puff(‘d1’,{})

消失后可以使用Element.show('d1') 再次将元素显示出来。

渐渐消失效果

Effect.Fade('d1')

渐渐显示效果

Effect.Appear('test_img')

震动效果

Effect.Shake(‘d1’,{})

此元素将会左右震动

闪烁效果

Effect.Pulsate('d1',{})

此函数通过alpha滤镜来进行闪烁。

长大效果

 Effect.Grow("d1",

{duration:5.0, direction: 'bottom-right', opacityTransition: Effect.Transitions.linear});

其中:direction 是指的元素从什么方向进入。

如果不指定后面的参数，元素缺省是从下面的中间开始变大。没有alpha效果。

萎缩效果

Effect.Shrink(“d1”,{})

长大效果Grow()的相反效果。

Toggle各种效果

汉语里面不知道怎么翻译Toggle，大体意思是：当某物打开的时候触发就关闭，而关闭的时候触发就打开 的一种像”乒乓开关”的行为。这种行为在做页面时特别有用。

Effect.toggle('d2','BLIND')

Effect.toggle('d2',’appear’)

Effect.toggle('d2',’slide’)

…

似乎所有这种有着相反效果的函数都可以在这里设置Toggle, ’BLIND’中的效果名大小写不敏感。

取消效果函数

这几个函数真是乏善可陈……唯一要提的就是关于中止这几个动画过程的函数：cancel()

例如：

effect1=new Effect.SlideUp(‘d1’,{duration:10.0});

想要在这10秒钟中止动画过程： effect1.cancel()

效果队列

这个神秘的queue属性，还有待进一步学习……

//建立列表：

<ul id="x">

<li id="item_1">1</li>

<li id="items_2">2</li>

<li d="items_3">3</li>

<li d="items_4">4</li>

</ul>

//开始建立可排序组件

<script type="text/javascript" language="javascript" charset="utf-8">

// <![CDATA[

   Sortable.create('x',    

{overlap:'horizontal',

ghosting:true,

constraint:false,

    onUpdate:function(sortable){alert(Sortable.serialize(sortable))},

    onChange:function(element){$('state').innerHTML = Sortable.serialize(element.parentNode)}

  });

参数名          初始值                     说明

element:          element

tag:                'li',                // assumes li children,标签内可被拖动的子标签名

      dropOnEmpty:       false,               ??

      tree:               false,               // fixme: unimplemented ??

      overlap:            'vertical',            // one of 'vertical', 'horizontal'

      constraint:          'vertical',            // one of 'vertical', 'horizontal', false

      handle:            false,               // or a CSS class ,CSS样式是此handle指定样式的标签部分可拖动如为false则整体可拖.      

      only:              false,                ???

      hoverclass:         null,                //被拖入位置的CSS

      ghosting:          false,                //显示残影占位

      format:            null,                 //???

      onChange:         Prototype.emptyFunction,

      onUpdate:         Prototype.emptyFunction

     dropOnEmpty:       true              //or false 指定此<UL>等可排序区域可否接受其他<UL>中的元素

      containment:        ["list1","list2"]      当dropOnEmpty设为true,在此参数中设置可接受的列表id

l          Sortable.serialize(sortable)  静态方法。返回一个当前sortable对象的按照排序顺序先后排列序号的字符串：如x[]=1& x[]=2& x[]=3，每一个<Li>的序号通过<li id="item_1">1</li>的下滑线后面的数字指定。下滑线前面的单词在一组排序中应使用一个相同的前缀。不同的组，前缀应该不同。

l          Sortable .destroy(sortable)  静态方法。撤销此对象的排序属性。