listscrolleffect.js

中国移动移动的客户系统数据库客户短和源码。

//version:2.5
/*
  spanId       //层的ID
  initLoca     //层开始出现的位置 tl tc tr  cl cc cr  bl  bc  br
  speed        //飘动速度  unit px/sec 10 - 100 递增10px
  bMouseOver   //是否有鼠标悬浮事件 1 鼠标悬停 0 鼠标不悬停

<span id='random_id' style='position:absolute;visibility:hidden;z-index:10'><a href='www.siteem.com' target='_blank'><img src='mars.jpg' width='160' height='120' border='0'></a></span>
<script type="text/javascript">
  var random_id = new siteem_floatwin("random_id","cl",50,1);
  setInterval("random_id.startFloat()",random_id.m_nFloatInterval);
  if (random_id.m_bMouseOver && random_id.spanObj != null)
  {
    random_id.spanObj.onmouseover = new Function("random_id.m_mouseState = 1");
    random_id.spanObj.onmouseout = new Function("random_id.m_mouseState = 0");
  }
</script>
*/
function siteem_floatwin(spanId,initLoca,speed,MouseOver)
{
  //初始化变量
  this.c_float_unit = 1 ;                                //px，每次飘动的位移
  this.m_mouseState = 0;                                 //0: 飘动 1: 停顿
  this.m_nFloatSpeed = 50;                               //滚动速度, unit px/sec
  this.initLoca = "";                                    //首次出现位置
  this.initLoca = initLoca;
  this.m_bMouseOver = MouseOver;                         //鼠标悬停事件
  if(this.m_bMouseOver!=0)this.m_bMouseOver=1;
  this.m_nFloatSpeed=speed;if(this.m_nFloatSpeed<=0)this.m_nFloatSpeed=50;
  this.m_nFloatInterval = parseInt(1000 / (this.m_nFloatSpeed / this.c_float_unit));//调用滚动函数的时间片;
  this.spanObj = null;
  this.spanObj = document.getElementById(spanId);        //获取飘动span
  this.xPos = 0;                                         //span 当前x坐标
  this.yPos = 0;                                         //span 当前y坐标
  this.yDirection = 0;                                   //标志y步进的方向(加/减步进)
  this.xDirection = 0;                                   //标志x步进的方向(加/减步进);
  this.clientW = 0;                                      //屏幕宽度
  this.clientH = 0;                                      //屏幕高度
  this.Hoffset = 0;                                      //span 高度
  this.Woffset = 0;                                      //SPAN 宽度
  if (this.spanObj != null)
  {
    this.Hoffset = this.spanObj.offsetHeight;
    this.Woffset = this.spanObj.offsetWidth;
  }
  //设置首次出现位置
  switch (this.initLoca)
  {
    case "tl":
      this.xPos = 0;
      this.yPos = 0;
      break;
    case "tc":
      this.xPos = parseInt((document.body.clientWidth - this.Woffset)/2);
      this.yPos = 0;
      break;
    case "tr":
      this.xPos = document.body.clientWidth;
      this.yPos = 0;
      break;
    case "bl":
      this.xPos = 0;
      this.yPos = document.body.clientHeight;
      break;
    case "bc":
      this.xPos = parseInt((document.body.clientWidth - this.Woffset)/2);
      this.yPos = document.body.clientHeight;
      break;
    case "br":
      this.xPos = document.body.clientWidth;
      this.yPos = document.body.clientHeight;
      break;
    case "cl":
      this.xPos = 0;
      this.yPos = parseInt((document.body.clientHeight - this.Hoffset)/2);
      break;
    case "cc":
      this.xPos = parseInt((document.body.clientWidth - this.Woffset)/2);
      this.yPos = parseInt((document.body.clientHeight - this.Hoffset)/2);
      break;
    case "cr":
      this.xPos = document.body.clientWidth;
      this.yPos = parseInt((document.body.clientHeight - this.Hoffset)/2);
      break;
    default :
      this.xPos = 0;
      this.yPos = 0;
  }
  //漂动函数
  this.startFloat =  function()
  {
    if (this.spanObj != null)
      this.spanObj.style.visibility = "visible";
    if (this.m_mouseState == 1) return;
    this.clientW = document.body.clientWidth;
    this.clientH = document.body.clientHeight;
    if (this.spanObj != null)
    {
      this.spanObj.style.left = this.xPos + document.body.scrollLeft;
      this.spanObj.style.top = this.yPos + document.body.scrollTop;
    }
    if (this.yDirection)
      this.yPos += this.c_float_unit;
    else
      this.yPos -= this.c_float_unit;
    if (this.yPos < 0)
    {
      this.yDirection = 1;
      this.yPos = 0;
    }
    if (this.yPos >= (this.clientH - this.Hoffset))
    {
      this.yDirection = 0;
      this.yPos = (this.clientH - this.Hoffset);
    }
    if (this.xDirection)
      this.xPos += this.c_float_unit;
    else
      this.xPos -= this.c_float_unit;
    if (this.xPos < 0)
    {
      this.xDirection = 1;
      this.xPos = 0;
    }
    if (this.xPos >= (this.clientW - this.Woffset))
    {
      this.xDirection = 0;
      this.xPos = (this.clientW - this.Woffset);
    }
  }
}

function browserType_scroll()
{
  var agent = navigator.userAgent.toLowerCase();
  this.ns = (agent.indexOf('mozilla')!= -1 && agent.indexOf('spoofer')== -1 && agent.indexOf('compatible') == -1 && agent.indexOf("opera") == -1 && agent.indexOf("firefox") == -1);
  this.ie = ((agent.indexOf("msie") != -1) && (agent.indexOf("opera") == -1));      //是否 IE
  this.op = (agent.indexOf("opera") != -1);    //是否 Opera
  this.ff = (agent.indexOf('mozilla')!= -1 && agent.indexOf('spoofer')== -1 && agent.indexOf('compatible') == -1 && agent.indexOf("opera") == -1 && agent.indexOf("firefox") != -1);
}
var is_scroll = new browserType_scroll();

/*
  1.自定义图片对象,每一个图片对象包括两部分内容：img和txt，分别是图片和文字的HTML
*/
function siteem_img(img,txt,ln,tg)
{
  this.img = img;
  this.txt = txt;
  this.ln = ln;
  this.tg = tg;
}

/*
  1.自定义图片预览对象
  2.使用时new一个对象调用对象的add方法
  3.调用对象的nextImg方法
*/
function siteem_imgPre(imgTdId,imgId,txtTdId,effectId,delayTime)
{
  this.imgArr=new Array();
  this.imgArrLen=0;
  this.imgPos=0;
  this.imgId=imgId;
  this.ImgTdId=imgTdId;
  this.imgTd=document.getElementById(imgTdId);
  this.imgObj=document.getElementById(imgId);
  this.txtTd=document.getElementById(txtTdId);
  this.effectId=effectId;
  this.delayTime=delayTime;
  if(this.delayTime<1000)
    this.delayTime=1000;
  this.duration=parseFloat((this.delayTime/1000)*0.2);
  if(this.duration>2)
    this.duration=2;
  this.add = function (img,txt,ln,tg)
  {
    var si = new siteem_img(img,txt,ln,tg);
    this.imgArr.push(si);
    this.imgArrLen++;
  }
  this.nextImg = function()
  {
    if ((this.imgTd == null) || (this.imgObj == null)) return;
    this.imgPos++;
    if (this.imgPos >= this.imgArrLen)
      this.imgPos = 0;
    var ramNum = 0;
    if (this.effectId == 23)
      ramNum = parseInt((Math.random() * 100) % 24,10);
    else
      ramNum = this.effectId;
    if (is_scroll.ie)
    {
      this.imgObj.filters["revealTrans"].Transition = ramNum;
      this.imgObj.filters["revealTrans"].Duration = this.duration;
      this.imgObj.filters["revealTrans"].apply();
      this.imgObj.filters["revealTrans"].play();
    }
    this.imgObj.src = this.imgArr[this.imgPos].img;
    if (is_scroll.ie)
    {
      var pe = this.imgObj.parentElement;
      if (pe != null)
      {
        if (this.imgArr[this.imgPos].ln != "")
        {
          if (pe.tagName.toLowerCase() == "a")
          {
            pe.href = this.imgArr[this.imgPos].ln;
            pe.target = this.imgArr[this.imgPos].tg;
          }
          else if ((pe.tagName.toLowerCase() == "td") && (pe.id == this.ImgTdId))
          {//insert A
            var ae = document.createElement("A");
            ae = this.imgObj.applyElement(ae);
            ae.href = this.imgArr[this.imgPos].ln;
            ae.target = this.imgArr[this.imgPos].tg;
          }
        }
        else
        {
          if (pe.tagName.toLowerCase() == "a")
          {
            pe.removeNode();
          }
        }
      }
    }
    else
    {
      var html = "";
      var imgHtml = "";
      var pe = this.imgObj.parentNode;
      if (pe != null)
        imgHtml = pe.innerHTML;
      if (this.imgArr[this.imgPos].ln != "")
      {//add img link
        html = "<a href=\"" + this.imgArr[this.imgPos].ln + "\" target=\"" + this.imgArr[this.imgPos].tg + "\">" + imgHtml + "</a>";
      }
      else
      {//remove img link
        html = imgHtml;
      }
      this.imgTd.innerHTML = html;
    }
    if(this.txtTd)
    	this.txtTd.innerHTML = this.imgArr[this.imgPos].txt;
    this.imgObj = document.getElementById(this.imgId);
  }
}

/*
  spanId      //div 的id
  Num         //每次滚动的行数或列数
  viewNum     //可见区域的行数direction   //滚动方向 up down left right
  direction   // 滚动方向
  delayTime   //停顿时间, unit sec
  speed       //滚动速度, unit px/sec
  mouseover   //是否使用鼠标悬停 1 悬停 0 不悬停

  var random_id= new siteem_initScroll("random_id",1,1,"right",1,300,1);
  random_id.start();
  if (random_id.m_bMouseOver)
  {
    random_id.newSpan.onmouseover = new Function("random_id.m_nCurrState=1");
    random_id.newSpan.onmouseout = new Function("random_id.m_nCurrState=0");
  }
*/
function siteem_initScroll(spanId,Num,viewNum,direction,delayTime,speed,mouseover)
{
  this.c_scroll_unit = 1;                  //px，每次滚动的位移
  this.m_nCurrState = 0;                   //0: 滚动 1: 鼠标悬停

  this.m_nEveryScrollRowOrColNum = Num;    //每次滚动的行数或列数
  this.m_nVisibleRowsNum = viewNum;        //可见区域的行数

  this.m_nScrollSpeed = speed;             //滚动速度, unit px/sec
  this.m_nDelayTime = delayTime;           //停顿时间, unit sec
  this.m_bMouseOver = mouseover;           //是否使用鼠标悬停
  this.direction = direction;              //滚动方向

  this.spanId = spanId;
  this.spanObj = document.getElementById(spanId); //找到div
  this.tabObj = null;                      //表格

  this.m_nScrollDistance = 0;              //一次完整的滚动的距离
  this.m_nDelayCount = 0;                  //需要调用dodelay的总次数
  this.m_nCurrDelayCounter = 0;            //当前的delay计数值
  this.m_nCurrScrollDistance = 0;          //当前已经滚动的距离
  this.m_nScrollInterval = 0;              //滚动timer的时间片 unit: ms
  this.originstr = "";                     //innerHtml
  this.realTable = null;                   //真正滚动的table
  this.viewHeight = 0;                     //可见区域的高度
  this.copyNum = 0;                        //复制table的个数
  this.distanceArray = new Array();        //每一个 行/列 的 高/宽 数组
  this.step = 0;                           //数组的下标
  this.scrollTimerId = 0;                  //doscroll的timerID
  this.newSpan = null;
  this.mozillaHeight = 0;
  this.mozillawidth = 0;
  this.scrollTimerId = null;
  this.myclipw = null;
  this.offsetValue = 0;
  this.name = 'siteem_initScroll_' + (++siteem_initScroll._name);
  this.rand_id = this.spanId + "ct";//"new_" + Math.round(Math.random() * 10000).toString() + Math.round(Math.random() * 1000).toString();

  //得到div中的第一层表格
  this.tabObj = getTable(this.spanObj);
  //表格的总高度
  this.tableHeight = parseInt(this.tabObj.offsetHeight,10);
  //表格的总宽度
  this.tableWidth = parseInt(this.tabObj.offsetWidth,10);
  if(this.direction == "left" || this.direction == "right")
  {
    this.myclipw = parseInt(this.spanObj.style.width,10);
  }
  if (this.myclipw == 0 || this.myclipw == null)
    this.myclip = this.tableWidth ;
  //div中第一个表格的第一行