各种显示效果（Effect）

梦里梦外; 2021-09-10 05:24 288阅读 0赞

# Effect效果对象 #

## 下拉效果&上拉效果 ##

<div id="d1">

aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>ccccccccccccc<p>

</div>

<a href="\#" οnclick="Effect.BlindDown('d1',\{\});; return false;">BlindDown()</a>

<p>

<a href="\#" οnclick="Effect.BlindUp('d1',\{\});; return false;">BlindUp()</a>

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

duration:1.0; 这个数字表示动作持续时间。

delay: 0.5   延迟0.5秒再启动效果

如果想让一个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属性，还有待进一步学习……

function startTimeline() \{

// 3x highlight in front

for(var i=0; i<3; i++)

new Effect.Highlight('d3', \{ duration: 1.0, queue: 'front' \});

// insert scale at very beginning

new Effect.Scale('d1', 75, \{ scaleContent: true, duration: 1.0, queue: 'front' \});

// parallel implied, delay 0.5 sec

new Effect.Highlight('d1', \{ delay: 0.5 \});

// puff at end

new Effect.Puff('d2', \{ duration: 4.0, queue: 'end' \});

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关动画效果之文字显示效果（逐行显示和滚动显示）

文字逐行显示效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

谁借莪１个温暖的怀抱￠/ 2024年04月19日 15:41/ 0 赞/ 7 阅读

相关 jQuery显示隐藏效果、滑动效果、淡入淡出效果、animate

jQuery效果显示隐藏效果 show()、hide()、toggle() show()显示效果 show([speed,[easing],[fn

曾经终败给现在/ 2023年01月02日 14:26/ 0 赞/ 137 阅读

相关 css3绘制各种图形效果

如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。如何工作？

叁歲伎倆/ 2022年07月24日 03:25/ 0 赞/ 164 阅读

相关用ajax显示loading效果

$.ajax({ type: 'post', url: '/Handler1.a

雨点打透心脏的1/2处/ 2022年05月28日 02:52/ 0 赞/ 143 阅读

相关圆形头像、图片显示效果

H5页面代码 <div> <img class="heads" id="tx" src=""> </div> css样式 .heads\{ margin-top:

心已赠人/ 2022年04月23日 02:54/ 0 赞/ 240 阅读

相关显示与隐藏效果

显示与隐藏效果开发工具与关键技术：DW、显示与隐藏效果作者：黄桂康撰写时间：2019.02.20 本篇介绍下拉框的效果，它只要是两个盒子，一个

谁借莪１个温暖的怀抱￠/ 2022年03月18日 11:17/ 0 赞/ 245 阅读

相关 JQuery隐藏和显示效果

1：引用插件jquery-3.2.1.min.js： 2：为了方便看出效果和美观，在外层放一个div盒子，给这个盒子设置一些样式：比如边距，边框，宽，高，

朴灿烈づ我的快乐病毒、/ 2021年12月20日 13:55/ 0 赞/ 291 阅读

相关 jQuery--菜单显示效果

前言内容显示效果： HTML代码： CSS代码： J

深藏阁楼爱情的钟/ 2021年09月27日 04:50/ 0 赞/ 344 阅读

相关各种显示效果（Effect）

Effect效果对象下拉效果&上拉效果 <div id="d1"> aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>cccccccccccc

梦里梦外;/ 2021年09月10日 05:24/ 0 赞/ 289 阅读

相关转 scriptaculous的Effect效果对象

2007年01月06日星期六 09:02 <table style="TABLE-LAYOUT: fixed"> <tbody> <tr> <td>

左手的ㄟ右手/ 2021年09月10日 04:12/ 0 赞/ 192 阅读