聚合新闻服务
手机wap浏览
您现在的位置: 动易模板 >> 动易中心 >> 动易教程 >> 正文
注册登陆
建站服务
视动工坊
服务项目
建站流程
建站价目
成功作品
联系信息
联系信息
视动工坊:动易认证设计师
动易模板大赛连续两次获奖
现共完成动易模板100余个
热诚欢迎定制改制动易模板
Q Q: 363881827
手机: 13153001848
Tel: 0531-83711777
Mail: wsdjqwj2003@163.com
   
实现了公告无缝向上滚动(去掉了水平线)
作者:佚名 文章来源:本站原创 点击数: 更新时间:2008-8-19 7:50:50

一开始用的是marquee标签,该方法不能实现无缝滚动,且通不过WEB标准检验,故改用JS实现。但动易2005的系统函数:ShowAnnounce输出代码中有<hr>,向上滚动时水平线也显示出来了,又通过修改语言包(加一个<br />)和添加一个CSS(hr {display: none;})来“去掉”水平线,终于达到了自己预期的效果。

演示:http://www.jzxx.net/


 

具体做法如下:

首先打开“Language/Gb2312.xml",找到:

<PageChar>个公告</PageChar>
   <AnnounceErr><![CDATA[<p>  没有公告</p>]]></AnnounceErr>

下面的两行添加"<br />":

<AnnounceBody1><![CDATA[<a class='AnnounceBody1' href='#' onclick="javascript:window.open('{$strInstallDir}Announce.asp?ChannelID={$ChannelID}&ID={$ID}', 'newwindow', 'height=440, width=400, toolbar=no, menubar=no, scrollbars=auto, resizable=no, location=no, status=no')" title='{$Content}'>{$title}{$AnnounceInfo}</a><br />]]></AnnounceBody1>
   <AnnounceBody2><![CDATA[<a class='AnnounceBody2' href='#' onclick="javascript:window.open('{$strInstallDir}Announce.asp?ChannelID={$ChannelID}&ID={$ID}', 'newwindow', 'height=440, width=400, toolbar=no, menubar=no, scrollbars=auto, resizable=no, location=no, status=no')" title='{$Content}'>{$title}{$AnnounceInfo}</a><br />]]></AnnounceBody2>

然后在模板中放置如下代码即可:

<style type="text/css">
hr {
    display: none;
}
#ann {
    padding-left: 10px;
    height: 17px;  /*滚动框的高度,可自行调整*/
    overflow: hidden;
}
</style>
<div id="ann">
   <div id="ann1">{$ShowAnnounce(1,5,false,false,0)}</div>
   <div id="ann2"></div>
</div>

<script type="text/javascript">
var articleHeight=20;
var stopscrolla=false;

var preTopa=0;
var currentTopa=0;
var stoptimea=0;

function init_srolltext1()
{
  ann1.scrollTop=0;

  with(ann1)
  {
    style.width=0;
    style.height=articleHeight;
    style.overflowX="visible";
    style.overflowY="hidden";
    noWrap=true;
    onmouseover=new Function("stopscrolla=true");
    onmouseout=new Function("stopscrolla=false");
  }

  ann2.innerHTML="";
  ann2.innerHTML+=ann1.innerHTML;
  ann1.innerHTML=ann2.innerHTML+ann2.innerHTML;
  setInterval("scrollUp1()",50);
}

function scrollUp1()
{
  if(stopscrolla==true) return;
  currentTopa+=1;
  if(currentTopa==21)  //21为滚动的距离,也可自行调整
  {
    stoptimea+=1;
    currentTopa-=1;
    if(stoptimea==50)   //50为停顿的时间,自行设置
    {
      currentTopa=0;
      stoptimea=0;
    }
  }
  else
  {
    preTopa=ann1.scrollTop;
    ann1.scrollTop+=1;
    if(preTopa==ann1.scrollTop)
    {
      ann1.scrollTop=ann2.offsetHeight-articleHeight;
      ann1.scrollTop+=1;
    }
  }
}

init_srolltext1();
</script>

动易中心录入:alang    责任编辑:alangyuafeng929 
  • 上一个动易中心:
  • 下一个动易中心: 没有了
  • 评论主题:实现了公告无缝向上滚动(去掉了水平线)(评论内容只代表网友观点)
    版权所有:copyright 2005-2008 动易模板NO.1 核心:PowerEasy SiteWeaver™ 6.6 备案:鲁ICP备05007599号
    电话:0531-83711777(晚间)手机:13153001848 QQ:363881827 群号:一群13022466(满)二群36354619