tuy

文字滚动的交互实现

文字滚动的交互实现;

一直想整理一篇有关文字滚动的文章,这周刚好做完智慧物流的后台会员中心界面,捕获一段空闲光阴,把以前做的一些滚动案例重新梳理一下。

提到“滚动效果”,我想这是一个最通俗,最普遍的列表或表单展示方式了;但是可别小看他,我总结了一下,就这么细微的交互都包含:

A:抛去鼠标事件(即不考虑鼠标的移进移出)
1:逐个像素往上滚动,显示出一种不间断的效果;
2:逐行往上滚动,显示出一种间断的效果,第一行整行往上滚动,当第一行完全滚动完毕就静止,一定时间间隔后,再滚第二行;产生这种交互目的一般是让浏览者可以有停顿的时间去阅读这个字段;
3:多行一起往上滚,比如我们在车站等车的时候,列车时刻表是整屏的滚动,为了方便乘客更好的阅读当页内容,所以间隔时间比较长;

B:如果加上鼠标事件的话,鼠标可以分为两种,一种是鼠标移动进去,静止,鼠标离开,滚动;第二种是鼠标移动进去,滚动,鼠标离开静止;

如果把A跟B的情况结合,细小的滚动交互,其实总共可以分成9大类!!

有没有感觉到很小的东西其实也可以拆分的很庞大。

刚进公司那会儿,我遇到这种交互需求,网上随便一搜,一抓一大把的 js代码;然后挑一个比较符合自己意境的交互效果代码,对此稍加修改,使其成为符合自己需求的交互效果,这样直接去网上拿,存在有一个显著的优点,就是能快速看到你需求的效果,但是这其中有一个小小的问题,就是js的交互跟DOM标签结构是紧密结合的,有时候为了完成一个网上的js效果,会大幅度的修改自己原先简洁的标签,把标签变成他的结构,仅仅是为了完成此次交互,违背了简洁明了的html DOM结构;

空暇之余笔者就在思考,能否封装一个比较多态的方法,通过这个方法去绑定DOM元素,实现各种效果的多态并用,即只要修改下简单的参数数值,就可以实现自己想要的文字滚动效果;

先来整理下思路:

宏观思路:滚动肯定要分为内容跟容器,容器可以是一个具有固定尺寸的块级元素,然后内容就是要进行滚动的直接对象,它被塞在容器里。给容器设置溢出隐藏,通过调整里面内容的位置就实现了滚动;

微观思路:一个像素一个像素往上滚动的话,就是每次时间间隔上移1px,为了实现循环,可以把内容复制一份,跟到原先的底部,这样的话,只要滚动到了固定的位置,就可以重头再开始滚;如果是一行一行往上滚的话,首先可以分为两种结构,一种是table结构,一种是UL结构,table的话tr是行的单位,UL的话li是行的单位,每次就是上移一个tr或者li的高度,移动完毕之后,再把溢出的tr或LI节点删除,然后把这个几点增加到内容块底部,这样就实现了循环;

设外部容器为C_div,内部容器为I_div,

设置C_div的样式:position:relative;overflow: hidden;

设置I_div 的样式:  position:absolute;

最后就是定时给内容的位置进行偏移即可实现滚动;

为了兼容性跟选择器的简化,此次滚动案例是基于jq库来实现的;

目前主要在一下页面使用:
http://www.nbeport.com/air/air.do
http://www.nbeport.com/shipping/ship.do
http://www.nbeport.com/

贴代码:

function nbeportScrUp(outerId, smooth, way, autoRun, innerId, hovers, times) {
  var Ele = outerId;
  var speed = times;
  var MyMar;
  var m = 0;
  var q;
  if (smooth) {
    var aa;
    var Cot = $(Ele).children(innerId);
    var Cots = Cot.html().toString();
    if ($(Ele).is("ul")) {
      $(Ele).children(".wrap").eq(0).html(Cots);
      var Coth = Cot.height();
    } else {
      $("").appendTo($(Ele));
      $(Ele).children(".wrap").eq(0).html(Cots);
      var Coth = $(Ele).children(".wrap").eq(0).height();
    }

    function Uper() {
      var m = $(Ele).css("top");
      var mL = m.length;
      var c = m.slice(0, mL - 2);
      var nC = Number(c);
      if (nC > -Coth) {
        nC--;
        $(Ele).css("top", nC);
      } else {
        $(Ele).css("top", 0);
      }
    }
    if (autoRun) {
      aa = setInterval(Uper, times / 30);
      if (hovers) {
        $(Ele).mouseover(function() {
          clearInterval(aa)
        }).mouseout(function() {
          aa = setInterval(Uper, times / 30);
        })
      } else {
        aa = setInterval(Uper, times / 30);
      }
    } else {
      $(Ele).mouseover(function() {
        aa = setInterval(Uper, times / 30);
      }).mouseout(function() {
        clearInterval(aa)
      })
    }
  } else {
    function Marquee() {
      var trF;
      if ($(Ele).is("ul")) {
        var trF = $(Ele).children("li").eq(0);
      } else {
        trF = $(Ele).find("tr").eq(0);
      }
      if (trF) {
        $(Ele).animate({
          top: -way
        }, speed / 4, function() {
          trF.remove();
          $(Ele).css("top", "0");
          $(Ele).append(trF);
        });
      } else return;
    }
    if (autoRun) {
      MyMar = setInterval(Marquee, speed);
      $(Ele).mouseover(function() {
        clearInterval(MyMar);
      });
      $(Ele).mouseout(function() {
        MyMar = setInterval(Marquee, speed);
      });
    } else {
      $(Ele).hover(function() {
        MyMar = setInterval(Marquee, speed);
      }, function() {
        clearInterval(MyMar);
      });
    }
  }
}


码字很辛苦,转载请注明来自tuy博客《文字滚动的交互实现》

评论