JS间隔性滚动代码[修正增加了部分功能] 【转：http://www.cnblogs.com/robot/archive/2008/04/09/1144568.html】...

于 2008-09-02 10:17:00 发布
阅读量53 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/JemBai/archive/2008/09/02/1281820.html
本文介绍了一种改进的滚动文本效果实现方法，通过修正鼠标移出触发多次延时的问题，并新增了方向控制、滚动速度及延迟等功能，使得滚动效果更加平滑且具备更好的交互体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上次的Demo做得太简陋了，估计大家看了都没什么兴趣，这次我也就不弹新窗口看效果了。大家直接看吧。放到页面上似乎跟园子的样式有些冲突[firefox下没问题]，大家凑合着看吧。建议直接下demo看吧。呵呵Demo下载新补上了带按钮的Demo.
修正增加的内容：
  1.修正连续的mouseout会触发多个setTimeout的问题。
  2.增加首行时点击Previous跳到最后一条记录。
  3.增加ScrollAmount和ScrollDelay属性[仿marquee的属性]。
  4.增加了一个Direction属性，只实现了up和down,谁有兴趣的可以再实现left和right.
  5.btnPrevious和btnNext参数改成可选参数。
  6.发现了可以当marquee来用的功能。

最新产品
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
向上滚动
var scrollup = new ScrollText("listcontent");
scrollup.LineHeight = 60;
scrollup.Amount = 4;
scrollup.Start();


最新产品
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
也可以当成marquee
var marquee = new ScrollText("listmarquee");
marquee.LineHeight = 60;
marquee.Amount = 1;
marquee.Timeout = 30;
marquee.Delay = 30;
marquee.Start();


最新产品
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
向下滚动
var scrolldown = new ScrollText("listcontent");
scrolldown.LineHeight = 60;
scrolldown.Amount = 4;
scrolldown.Direction = "down";
scrolldown.Start();


最新产品
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
名称:最新商品1
描述:最新商品1到货了.
价格:￥999.99
名称:最新商品2
描述:最新商品2到货了.
价格:￥999.99
名称:最新商品3
描述:最新商品3到货了.
价格:￥999.99
名称:最新商品4
描述:最新商品4到货了.
价格:￥999.99
上一条
下一条
加上按钮的效果
var scrolldown = new ScrollText("listwithbtn","scrollpre","scrollnext");
scrolldown.LineHeight = 60;
scrolldown.Amount = 4;
scrolldown.Start();

转载于:https://www.cnblogs.com/JemBai/archive/2008/09/02/1281820.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值