effects.js小记(原)

缩放图片:
[code]<%= image_tag("del.jpg",:οnclick=>"new Effect.Scale(this,150)")%>[/code]
如果图片是png格式的话(del.png),则只需image_tag("del",...)即可。后面那个数字参数150代表的是放大图片,这里是以100为基准的,小于100就是缩小图片了,另外与100的差值越大则一次变化的幅度也越大哈。
缩放文字:
[code]<div id="outerdiv"
style="width:300px;heght:300px;border:1px solid red;">
<div style="width:15em;height:2em;border:1px solid blue;">
字体动态改变测试哈。
</div>
</div>
<%= link_to_function("小","Element.setContentZoom('outerdiv',80)")%>
<%= link_to_function("中","Element.setContentZoom('outerdiv',100)")%>
<%= link_to_function("大","Element.setContentZoom('outerdiv',120)")%>[/code]
以前我用过一个JS也可以实现这个效果,不过这里用effects.js也蛮方便的说。后面那个数字的解释同上。另外,敏捷开发第一版上说要以em为单位指定才有效,用px不行,我试了下,没有此问题,也许是在新版本中已经支持了吧。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值