`
mathsfan
  • 浏览: 568147 次
  • 性别: Icon_minigender_1
  • 来自: 浙江省杭州市
社区版块
存档分类
最新评论

effects.js小记(原)

阅读更多
缩放图片:
<%= image_tag("del.jpg",:onclick=>"new Effect.Scale(this,150)")%>

如果图片是png格式的话(del.png),则只需image_tag("del",...)即可。后面那个数字参数150代表的是放大图片,这里是以100为基准的,小于100就是缩小图片了,另外与100的差值越大则一次变化的幅度也越大哈。
缩放文字:
<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)")%>

以前我用过一个JS也可以实现这个效果,不过这里用effects.js也蛮方便的说。后面那个数字的解释同上。另外,敏捷开发第一版上说要以em为单位指定才有效,用px不行,我试了下,没有此问题,也许是在新版本中已经支持了吧。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics