Spry 特效 API
概览
:
高亮
:
渐显/渐隐
:
扩展/收缩
:
挤压
:
震动
:
展开/收起
:
滑动向上/滑动向下
目前，SpryEffects.js提供了下面的特效：
∙ 渐显/渐隐 - 使元素渐显或隐藏
∙ 扩展/收缩 - 模拟一个窗口扩展或收缩。影响的元素内容位置不变。
∙ 滑动- 模拟一个窗口滚动。影响的元素向上/下滚动或向左/右。
∙ 挤压 - 从元素的左上角扩展/收缩。
∙ 展开/收起 - 收缩或扩展元素。
∙ 震动- 快速左右移动元素
∙ 高亮- 闪烁一个元素的背景。
链接
Spry特效后的体系
一个SpryEffects.js中函数的详细的概览
实例
∙ 同一个页面中包含所有效果 (Adobe Products Demo)
∙ 使用设置和完成回调函数的使用样式 (Firefox, Opera & Safari )
∙ 一些效果在同一个页面
∙ 演示在图片上使用收缩/扩展效果, 同时使用 setup & finish 回调函数设置 z-index 样式属性
高亮
闪烁一个元素的背景。
样例
 查看样例
script  src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body>
<a onclick="Spry.Effect.Highlight('highlight1',{duration:  2000,  from:'#CCCCCC',  to:'#FFCC33',restoreColor: '#FFCC33',toggle:true})" >
    Highlight Box  </a></p>
<div class="demoDiv"  id="highlight1"><span class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
</span>
</div>
</body>
代码－第一个参数是元素的ID
高亮效果的参数
可选构造函数参数
duration
持续时间毫秒
from
起始颜，高亮的第一帧的颜。
toggle
true or false,如果是true 则restoreColor被忽略
to
终止颜，高亮的最后一帧的颜。
restoreColor
在高亮效果完成后重载元素的背景颜。
setup
在效果开始的时候调用的函数例如 function setup (element,effect){}
finish
在效果结束的时候调用的函数例如 function finish (element,effect){}
transition
Spry.sinusoidalTransition 或 Spry.sinusoidalTransition 对象
注意
如果使用toggle选项，restoreColor将被忽略。
不能使用的元素
applet, body, frame, frameset, noframes
返回
渐显/渐隐
使元素渐隐/渐显
样例
 查看样例
<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body>
<a onclick="Spry.Effect.AppearFade('1', {duration:1000,from:100,to:20,toggle:true})" > Fade from 100%  to 20%  with toggle=true </a>(Fade)</p>
<div class="demoDiv" id="1">
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
<p>
<a onclick="Spry.Effect.AppearFade('2', {duration:1000,from:20,to:100,toggle:true}) >Fade from 20%  to 100% with toggle=true
</a></p>
<div  class="demoDiv" style="background-color:#CCCCCC; height:25px; opacity:0.2; filte
r:alpha(opacity=20)"  id="2">
  <p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    </p>
</div>
</body>
 
代码－ 第一个参数是元素的ID
渐隐/渐显的参数
可选构造函数参数
duration
持续时间毫秒
from
开始值，整数　from:10　
to
结束值，整数
toggle
特效可以反向运行
setup
在效果开始的时候调用的函数例如 function setup (element,effect){}
finish
在效果结束的时候调用的函数例如 function finish (element,effect){}
transition
Spry.sinusoidalTransition 或 Spry.sinusoidalTransition 对象
注意
除了body，tr,tbody,thead不可以使用，几乎所有HTML元素都可以使用。
现在没有通用设置元素透明度的方式，同时使用opacity:0.2，filter:alpha(opacity=20)。
透明度不被支持 [Firefox 1.5, Microsoft IE for Macintosh 5.2, Microsoft Internet Explorer 6.0, Netscape Navigator 8.0, Opera 8.0, Safari 2.0]
不能使用的元素
applet, body, iframe, object, tr, tbody, th
返回
扩展/收缩
扩展/收缩特定元素。
样例
 查看样例
<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body>
<a onclick="Spry.Effect.GrowShrink('example1',{duration:700, from:'100%', to:'20%',toggle: true})" >
Shrink from 100%  to 20%  with toggle=true实现特效的代码js
</a>
<div class="demoDiv" id="example1"><span class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet</span></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。