主题:  如何在网页中实现这种滚动效果?

5DMaya版主

职务:版主
等级:3
金币:10.0
发贴:737
注册:2001/2/22 11:20:53
#12002/4/10 11:59:34
www.77design.com/default2.asp

类似上面页面右边上下箭头的滚动效果!
谢谢了!



bihu

职务:普通成员
等级:1
金币:1.0
发贴:227
注册:2001/10/10 7:57:50
#22002/4/11 20:55:51
研究一下它的代码,或者用scrollmat插件也可以实现类似效果



=ridincal=

职务:管理员
等级:7
金币:20.0
发贴:5886
注册:2004/1/13 11:47:04
#32002/4/11 22:35:03
代码在http://www.77design.com/scripts/functions_scroll.js

关键的函数是:

function ff_scrollLayer(strLayer, direction, speed) {
    if(ff_getObj(strLayer)){
        scrollTimer = null
        var y = ff_getY(strLayer)

        if (typeof(scrOrigY[strLayer]) == 'undefined') {
            scrOrigY[strLayer] = y
            scrOrigH[strLayer] = ff_getH(strLayer)
        }
        var offset = y - scrOrigY[strLayer]
        speed = (speed) ? speed : 3
        if ( (direction == -1 && y+ff_getScrollH(strLayer) >= scrOrigY[strLayer]+scrOrigH[strLayer]) || (direction == 1 && y < scrOrigY[strLayer]) ) {
            offset += direction*speed
            ff_moveBy(strLayer, null, direction*speed)
            ff_clip(strLayer, 0-offset, ff_getW(strLayer), (0-offset) + scrOrigH[strLayer], 0)
            scrollTimer = setTimeout("ff_scrollLayer('" + strLayer + "', " + direction + ", " + speed + " ) ", 30)
        }
    }
}

在你的网页中添加一个图层,id为“MyLayer”,图层中放上滚动内容,然后在箭头处:

onMouseOver="ff_scrollLayer('MyLayer', 1, 10)"//向上滚动
onMouseOut="clearTimeout(scrollTimer)"

onMouseOver="ff_scrollLayer('MyLayer', -1, 10)"//向下滚动
onMouseOut="clearTimeout(scrollTimer)"

编辑历史:[这消息被ridincal编辑过(编辑时间2002-04-11 22:35:49)]


5DMaya版主

职务:版主
等级:3
金币:10.0
发贴:737
注册:2001/2/22 11:20:53
#42002/4/12 15:38:58
非常感谢阿!



zhji

职务:普通成员
等级:1
金币:0.0
发贴:67
注册:2005/12/31 13:30:21
#52002/4/12 22:25:19
不是dw的那个插件的效果吗



5DMaya版主

职务:版主
等级:3
金币:10.0
发贴:737
注册:2001/2/22 11:20:53
#62002/4/14 22:50:01
那个插件?
可以轻松实现吗?



palay

职务:普通成员
等级:1
金币:0.0
发贴:67
注册:2001/6/1 13:22:17
#72002/4/16 10:16:06
为什么一个页面只可以用一个这种效果呢?
就是说只能应用于一个层上,如果要应用于多个层上应该怎么做呢????????
我不会改javascript



=ridincal=

职务:管理员
等级:7
金币:20.0
发贴:5886
注册:2004/1/13 11:47:04
#82002/4/16 10:45:44
对不同的滚动层定义不同的ID:
Layer1,Layer2:
改变ff_scrollLayer函数的第一个参数:

onMouseOver="ff_scrollLayer('Layer1', 1, 10)"//滚动Layer1
onMouseOut="clearTimeout(scrollTimer)"

onMouseOver="ff_scrollLayer('Layer2', 1, 10)"//滚动Layer2
onMouseOut="clearTimeout(scrollTimer)"



palay

职务:普通成员
等级:1
金币:0.0
发贴:67
注册:2001/6/1 13:22:17
#92002/4/16 16:38:25
不行啊,关键函数要放到什么地方啊?我不会javascipt啊,所以看不懂啊,还有用来控制的那段,就是你楼上的楼上说的那段新建一个层,要把代码放到什么地方啊~!~!~!~!~?!~?!~?
多谢帮助



=ridincal=

职务:管理员
等级:7
金币:20.0
发贴:5886
注册:2004/1/13 11:47:04
#102002/4/16 19:10:08
http://www.77design.com/scripts/functions_scroll.js下载,保存到你的Site然后,将这个JS文件连接到你的页面中就可以使用了。