妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 25760|回复: 42

妙味课堂-特效-手风琴缓动效果

  [复制链接]
motao 发表于 2011-3-16 14:42:26 | 显示全部楼层 |阅读模式
之前有学员问到过这种效果,只是鼠标移过去,立即展开当前页,并没有加缓动效果。

效果预览如下:

后来找了一点时间,做成了缓动的感觉,效果好了很多。

>>效果预览

这个效果的思路其实有些小技巧,有二种思考角度:

第一种是所有的图片层都用绝对定位,一个叠加到另一个上面,当鼠标滑过时,改变相对应图片层的位置。

第二种是所有的图片层都用左浮动,并列排成一行,当鼠标滑动时,改变相对应图片层的宽度值,以达到最终效果。

两种思路比较起来,第二种明显处理的较为简单,代码量也少。我们采用的是第二种。

miaov_accordion.rar (375.33 KB, 下载次数: 4984)
手风琴.jpg
回复

使用道具 举报

逍遥的荣 发表于 2011-3-21 20:29:46 | 显示全部楼层
本帖最后由 逍遥的荣 于 2011-3-21 20:37 编辑

见了不少网站弄了这个效果,确实不错。很实用的效果。

我觉得这个效果的创意是:★★★★★
我觉得这个效果的设计是:★★★★
我觉得这个效果的实用性:★★★★

我觉得如果图片和右侧的标着第几个的竖条能用淡点颜色统一的边框圈起来,从实用性来看,效果是不是更好。因为看的人知道自己看的图片对应着哪个竖条。
回复 支持 反对

使用道具 举报

leo 发表于 2011-3-21 21:22:45 | 显示全部楼层
回复 2# 逍遥的荣

不错的提议,让当前展示的图片高亮显示,的确是一个让用户体验更好的细节~~:victory:
回复 支持 反对

使用道具 举报

hu728 发表于 2011-3-25 11:18:09 | 显示全部楼层
:)真的很效果啊
回复 支持 反对

使用道具 举报

wudimayi 发表于 2011-4-1 12:01:33 | 显示全部楼层
很漂亮的效果啊
回复 支持 反对

使用道具 举报

keelii 发表于 2011-4-1 13:36:53 | 显示全部楼层
JS代码被压缩了,不过还是能看。JS Beauty太好用啦:lol
回复 支持 反对

使用道具 举报

kobekaisa 发表于 2011-4-19 11:37:40 | 显示全部楼层
IE 8 似乎不行
回复 支持 反对

使用道具 举报

hanjinpeng 发表于 2011-5-29 21:08:23 | 显示全部楼层
蛮好看的
回复 支持 反对

使用道具 举报

 楼主| motao 发表于 2011-5-30 15:41:56 | 显示全部楼层
回复 8# kobekaisa


    刚刚测试 IE8 没发现问题啊
回复 支持 反对

使用道具 举报

culture 发表于 2011-6-1 16:13:04 | 显示全部楼层
我觉得这个效果的创意是:★★★
我觉得这个效果的设计是:★★★
我觉得这个效果的实用性:★★★★
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 21:10 , Processed in 0.139455 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表