能灵活调用的无缝滚动js
日期：2014-05-16 浏览次数：20346 次
求一个能灵活调用的无缝滚动js
大概要求是这样的
我在后台写<div>panel</div>,并且可以随意向panel中添加各种东西，通过在div里设置属性或者后台调用javascript来使这个div里的所有控件按一种方向一种速度无缝滚动
然后又可能会继续在后台写<div></div>,里面包含别的东西，滚动方向等的要求也将不同
除了javascript是放在前台，其他所有东西都必须放后台，根据从sql里读到的值，再根据情况写到界面上
而我需要的就是一个可以这样使用的javascript
网上找了几天，都不是很满意，有个scroll.js，在某些情况下是不会滚动的，或者滚动效果比较差
所以。。。哪位高手有空能不能写个完善些的javascript，谢谢啦
------解决方案--------------------
网上应该找不到完全符合你要求的代码，必须自己改造，参考一下这个吧~~
<div style="width:200px;height:150px;overflow:hidden" onmouseover="try{clearTimeout(timer1)}catch(e){;}" onmouseout="timer1=setInterval('newsScroll()',10)">
<table cellspacing=0 cellpadding=5 bgcolor=#F8F8F8 style="position:relative;top:0px;width:200px;table-layout:fixed" id=news>
<tbody>
<tr>
<td valign=top height=150>
<b>新闻一</b><br>
我是打头的<br>
我向上运动<br>
我向上运动<br>
我向上运动
</td>
</tr>
<tr>
<td valign=top height=150>
<b>新闻二</b><br>
我是打头的<br>
我向上运动<br>
我向上运动<br>
我向上运动<br>
</td>
</tr>
<tr>
<td valign=top height=150>
<b>新闻三</b><br>
我是打头的<br>
我向上运动<br>
我向上运动<br>
</td>
</tr>
</tbody>
<script language=javascript>
//重复一次新闻内容
document.write(news.tBodies[0].innerHTML)
</script>
</table>
</div>
<script language=javascript>
//实现不间断滚动
function newsScroll()
{
scrollTop1.value=news.scrollTop;
scrollHeight1.value=news.scrollHeight;
offsetTop1.value=news.offsetTop;
offsetHeight1.value=news.offsetHeight;
top1.value=news.style.top;
client1.value=news.clientTop;
clienth1.value=news.clientHeight;
pixel1.value=news.style.pixelTop;
news.style.pixelTop=(news.style.pixelTop-1)%(news.clientHeight/2);
}
timer1=setInterval('newsScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。
</script>
<nobr>news.scrollTop:<input type=text id="scrollTop1">news.scrollHeight:<input type=text id="scrollHeight1"><br>news.offsetTop<input type=text id="offsetTop1">news.offsetHeight:<input type=text id="offsetHeight1"><br>news.style.top:<input type=text id="top1">news.clientTop:<input type=text id="client1"><br>news.clientHeight:<input type=text id="clienth1">news.style.pixelTop:<input type=text id="pixel1"></nobr>
------解决方案--------------------
还有这个
<div id="demob" onmouseover="ij=1" style="border:1px solid gray;OVERFLOW: hidden; HEIGHT: 119px; width:211px " onmouseout="ij=0">
<div id="demob1">?<br>?<br>?<br>?<br>?<br>?<br>?<br>?<br>?<br>
可以是任何的HTML内容<br>
<font color="red">HTML</font><br>
</div>
<div id="demob2"></div>
</div>
<SCRIPT>
var ij=0;t=demob.scrollTop
demob2.innerHTML=demob1.innerHTML
function qswhMarquee2(){
if (ij==1)return
if(demob2.offsetTop-demob.scrollTop<=0)
demob.scrollTop-=demob1.offsetHeight
else
demob.scrollTop++
}
setInterval(qswhMarquee2,50)
</SCRIPT>
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//
大概要求是这样的
我在后台写<div>panel</div>,并且可以随意向panel中添加各种东西，通过在div里设置属性或者后台调用javascript来使这个div里的所有控件按一种方向一种速度无缝滚动
然后又可能会继续在后台写<div></div>,里面包含别的东西，滚动方向等的要求也将不同
除了javascript是放在前台，其他所有东西都必须放后台，根据从sql里读到的值，再根据情况写到界面上
而我需要的就是一个可以这样使用的javascript
网上找了几天，都不是很满意，有个scroll.js，在某些情况下是不会滚动的，或者滚动效果比较差
所以。。。哪位高手有空能不能写个完善些的javascript，谢谢啦
------解决方案--------------------
网上应该找不到完全符合你要求的代码，必须自己改造，参考一下这个吧~~
<div style="width:200px;height:150px;overflow:hidden" onmouseover="try{clearTimeout(timer1)}catch(e){;}" onmouseout="timer1=setInterval('newsScroll()',10)">
<table cellspacing=0 cellpadding=5 bgcolor=#F8F8F8 style="position:relative;top:0px;width:200px;table-layout:fixed" id=news>
<tbody>
<tr>
<td valign=top height=150>
<b>新闻一</b><br>
我是打头的<br>
我向上运动<br>
我向上运动<br>
我向上运动
</td>
</tr>
<tr>
<td valign=top height=150>
<b>新闻二</b><br>
我是打头的<br>
我向上运动<br>
我向上运动<br>
我向上运动<br>
</td>
</tr>
<tr>
<td valign=top height=150>
<b>新闻三</b><br>
我是打头的<br>
我向上运动<br>
我向上运动<br>
</td>
</tr>
</tbody>
<script language=javascript>
//重复一次新闻内容
document.write(news.tBodies[0].innerHTML)
</script>
</table>
</div>
<script language=javascript>
//实现不间断滚动
function newsScroll()
{
scrollTop1.value=news.scrollTop;
scrollHeight1.value=news.scrollHeight;
offsetTop1.value=news.offsetTop;
offsetHeight1.value=news.offsetHeight;
top1.value=news.style.top;
client1.value=news.clientTop;
clienth1.value=news.clientHeight;
pixel1.value=news.style.pixelTop;
news.style.pixelTop=(news.style.pixelTop-1)%(news.clientHeight/2);
}
timer1=setInterval('newsScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。
</script>
<nobr>news.scrollTop:<input type=text id="scrollTop1">news.scrollHeight:<input type=text id="scrollHeight1"><br>news.offsetTop<input type=text id="offsetTop1">news.offsetHeight:<input type=text id="offsetHeight1"><br>news.style.top:<input type=text id="top1">news.clientTop:<input type=text id="client1"><br>news.clientHeight:<input type=text id="clienth1">news.style.pixelTop:<input type=text id="pixel1"></nobr>
------解决方案--------------------
还有这个
<div id="demob" onmouseover="ij=1" style="border:1px solid gray;OVERFLOW: hidden; HEIGHT: 119px; width:211px " onmouseout="ij=0">
<div id="demob1">?<br>?<br>?<br>?<br>?<br>?<br>?<br>?<br>?<br>
可以是任何的HTML内容<br>
<font color="red">HTML</font><br>
</div>
<div id="demob2"></div>
</div>
<SCRIPT>
var ij=0;t=demob.scrollTop
demob2.innerHTML=demob1.innerHTML
function qswhMarquee2(){
if (ij==1)return
if(demob2.offsetTop-demob.scrollTop<=0)
demob.scrollTop-=demob1.offsetHeight
else
demob.scrollTop++
}
setInterval(qswhMarquee2,50)
</SCRIPT>
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
