搜狐新闻频道的一个效果，请教一下是否可以实现

高维 · 发表于 2011-6-27 10:12:22

各位坛友，版主，早上好~
搜狐新闻频道左侧焦点图下的“精品栏目”频道，其中鼠标进入列表框某区域时，矩形框会自动撑开，这种缩放效果的列表框不知道用AXURE可否实现，望可以告知大概的思路，谢谢！

搜狐新闻：http://news.sohu.com/

尹广磊 · 发表于 2011-6-27 12:24:55

应该可以做，不过应该很麻烦，有空的时候我做做试试。

高维 · 发表于 2011-6-27 14:04:15

多谢尹老师

许威 · 发表于 2011-6-30 17:48:49

产品经理要学的东西可真不少！~~

老蔡 · 发表于 2011-7-1 09:59:06

抽屉式展示.rp (230.96 KB, 下载次数: 162)

时间关系，我就把之前一个类似的发上来了。仅供参考。

韩翠灵 · 发表于 2011-7-1 10:56:47

5# 蔡高泽

学习了，效果达到了，谢谢楼上大侠提供的不同思路。
实现原理：利用动态面板的不同状态，来达到效果，不足之处，鼠标滑过之处离搜狐新闻的效果还是有点点距离的。

可能用多层动态面板，并且移动动态面板来实现效果更完美，想了下，里面的鼠标移动还是有一层逻辑关系的，即当滑到第N个面板时，第N+1个以后的变化情况是怎么用的，需要用到函数，俺不会，呵呵。

张鹤鹏 · 发表于 2011-7-1 17:52:54

2# 尹广磊

可能用多层动态面板，并且移动动态面板来实现效果更完美，想了下，里面的鼠标移动还是有一层逻辑关系的，即当滑到第N个面板时，第N+1个以后的变化情况是怎么用的，需要用到函数，俺不会，呵呵。
韩翠灵发表于 2011-7-1 10:56

用了半个下午的时间终于做出来了！练习为目的所以只做了三个新闻，看起来貌似很简单，其实原理都一样！
未设置悬停选中样式、展开+-号切换等，作为练习题没有必要大费周章。功能上完全实现了层叠抽屉特效，没有缩水。
触发事件上做了最优化考虑，case一目了然，方便添加新闻。

值得注意的是：
1、面板的移动应选绝对位置。
2、把抽屉状态赋值给变量，进而通过变量值判断展开状态进行相应位移。
3、需要让栏目框成为所有小新闻的父面板来限定栏目的尺寸。
4、其实并没有复杂的逻辑，也不需要用到函数。
只要通过反复观察原网页的效果发现了足够的规律就可以轻松模仿出来。

不好意思重新挂了链接，可以下载了。

搜狐抽屉新闻栏.rp (131.4 KB, 下载次数: 384)
谢谢尹老师的分~！:P

高维 · 发表于 2011-7-4 16:12:48

7# 张鹤鹏
多谢赐教，我刚刚弄明白本地变量的使用，对这个全局变量还是不甚了解，不懂当全局变量的值等于“1、2、3”的时候是什么意思，望大概讲解一下！！

张鹤鹏 · 发表于 2011-7-4 18:33:37

8# popman121

此地变量的这种用法说白了就是表示几种状态，
说明——
变量为1的时候表示现在是第一条新闻展开的状态
变量为2的时候表示现在是第二条新闻展开的状态
变量为3的时候表示现在是第三条新闻展开的状态

这样当事件触发时先判断此时的状态再做出我们想要的反应，从而最大限度的规避由于多次触发事件导致的异常（Bug）而不得不刷新页面。

不知道我这么瞎解释一通，你能有什么斩获，见笑了。

cookiemon · 发表于 2012-12-12 09:49:13

8# popman121

此地变量的这种用法说白了就是表示几种状态，
说明——
变量为1的时候表示现在是第一条新闻展开的状态
变量为2的时候表示现在是第二条新闻展开的状态
变量为3的时候表示现在是第三条新闻展开 ...
张鹤鹏发表于 2011-7-4 18:33

同样遇到BUG，鼠标多次快速切换将会出现动态模板Y轴错误，不过长见识。:)

张鹤鹏 · 发表于 2012-12-12 10:25:07

同样遇到BUG，鼠标多次快速切换将会出现动态模板Y轴错误，不过长见识。:)
cookiemon 发表于 2012-12-12 09:49

以现在眼光看，这种判断最好能以动态面板自身的状态为条件。除非页面间跳转需通过变量来传递信息，则能不动用到变量的地方尽量不用。

八卦雞 · 发表于 2013-6-7 10:50:18

下来研究学习下~