zoukankan      html  css  js  c++  java
  • JS间隔性滚动代码[修正增加了部分功能]

    上次的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
    向上滚动
    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
    也可以当成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
    向下滚动
    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
    上一条
    下一条
    加上按钮的效果
    var scrolldown = new ScrollText("listwithbtn","scrollpre","scrollnext");
    scrolldown.LineHeight = 60;
    scrolldown.Amount = 4;
    scrolldown.Start();


  • 相关阅读:
    【java基础 11】java集合框架学习
    【java基础 10】hash算法冲突解决方法
    【java 基础 9】原来我从没有了解过String类
    阳光总在风雨后——研究生考后总结
    【java基础 8】垃圾收集算法及内存分配策略
    【java基础 7】java内存区域分析及常见异常
    【java基础 6】java的发展史简介
    springboot的使用体验和思考
    大道至简——你比你想象中更早接触微服务
    【Ts 3】Nginx的Http(图片)服务器配置+ftp上传使用说明
  • 原文地址:https://www.cnblogs.com/robot/p/1144568.html
Copyright © 2011-2022 走看看