是一个能实现连续滚动的脚本。
功能:实现 http://210.46.97.35(我原来做的黑龙江大学学业导师工作站,后经别人改版)主页上导师向左滚动的效果。
相关的样式:
1
.newslistcBody
2 {} {
3 overflow:hidden;
4 width: 345px;
5 vertical-align: middle;
6 text-align: center;
7 margin-top: 1px;
8 border-top: solid 1px #DEF1DD;
9}
2 {} {
3 overflow:hidden;
4 width: 345px;
5 vertical-align: middle;
6 text-align: center;
7 margin-top: 1px;
8 border-top: solid 1px #DEF1DD;
9}
< div class ="newslistcBody" runat ="server" id ="divBody" >
< table style ="margin-top:10px;" >
< tr >
< td class ="picnewslist" id ="divlist" runat ="server" >
< table >
< tr >
< asp:Repeater ID ="grdNewsList" runat ="server" OnItemDataBound ="grdNewsList_ItemDataBound" >
< ItemTemplate >
< td class ="picnewsitem" >
< div class ="picnewscontent" >
< a href ="<%# " ~/newsContent" + Eval("NewsID") + ".htm" % > " target="_blank">
< img alt ="" src ="<%# " Images/NewsImage/" + Eval("imgurl") % > " title=" <% # Eval("Title") %> "
οnerrοr="this.src='images/error.png';this.title='图片显示错误'" class="imgNews" /> </ a >
</ div >
< div class ="picnewstitle" >
< asp:HyperLink ID ="HyperLink1" runat ="server" Target ="_blank" NavigateUrl ='<%# "~/newsContent" + Eval("NewsID") + ".htm" % > '
Text=' <% # bind("Title") %> '>HyperLink </ asp:HyperLink >
</ div >
</ td >
</ ItemTemplate >
</ asp:Repeater >
</ tr >
</ table >
</ td >
< td id ="divlist2" class ="picnewslist" >
</ td >
</ tr >
</ table >
</ div >
脚本是这样的:
<
script type
=
"
text/javascript
"
>
var demo0 = document.getElementById( ' <%=divBody.ClientID %> ' );
var demo1 = document.getElementById( ' <%=divlist.ClientID %> ' );
var demo2 = document.getElementById( ' divlist2 ' );
var speed = 50 ; // 值越大越慢
demo2.innerHTML = demo1.innerHTML;
function Marquee1()
{
//document.getElementById("divtest").innerHTML=demo2.scrollWidth+"-"+ demo0.scrollLeft;
if(demo2.offsetWidth-demo0.scrollLeft<=0)
{
demo0.scrollLeft -= demo1.offsetWidth
}
else
{
demo0.scrollLeft++
}
// if(document.getElementById(demo2).offsetTop - document.getElementById(demo).scrollTop <=28) //如果重合
// {
// document.getElementById(demo).scrollTop -= document.getElementById(demo1).offsetHeight; //指定到初始位置
// }
// else
// {
// document.getElementById(demo).scrollTop++;
// }
}
var MyMar1 = setInterval(Marquee1,speed)
demo0.onmouseover = function () {clearInterval(MyMar1)}
demo0.onmouseout = function () {MyMar1=setInterval(Marquee1,speed)}
< / script>
var demo0 = document.getElementById( ' <%=divBody.ClientID %> ' );
var demo1 = document.getElementById( ' <%=divlist.ClientID %> ' );
var demo2 = document.getElementById( ' divlist2 ' );
var speed = 50 ; // 值越大越慢
demo2.innerHTML = demo1.innerHTML;
function Marquee1()
{
//document.getElementById("divtest").innerHTML=demo2.scrollWidth+"-"+ demo0.scrollLeft;
if(demo2.offsetWidth-demo0.scrollLeft<=0)
{
demo0.scrollLeft -= demo1.offsetWidth
}
else
{
demo0.scrollLeft++
}
// if(document.getElementById(demo2).offsetTop - document.getElementById(demo).scrollTop <=28) //如果重合
// {
// document.getElementById(demo).scrollTop -= document.getElementById(demo1).offsetHeight; //指定到初始位置
// }
// else
// {
// document.getElementById(demo).scrollTop++;
// }
}
var MyMar1 = setInterval(Marquee1,speed)
demo0.onmouseover = function () {clearInterval(MyMar1)}
demo0.onmouseout = function () {MyMar1=setInterval(Marquee1,speed)}
< / script>
可能您也已经看到我脚本上调试的痕迹了,这段脚本我仔细检查过,是没有问题的(由于是直接从原来做的网站上粘贴过来的代码,js变量的命名什么的都没有修改,见谅!)。不过有一点使我不解的是,它总是会走一圈或者半圈就停止了。后来经测试,我发现 d emo2.offsetWidth-demo0.scrollLeft<=0 这句话并不总是能够成立,demo2.offsetWidth-demo0.scrollLeft的的最小值有时是71,有时是28.真不知道为什么会是这样?
期望有明白个中原因的兄弟姐妹帮下忙,我实在不知道该如何去处理这个找不到是什么原因的问题了!