读书人

能灵活调用的无缝滚动js

发布时间: 2012-03-21 13:33:15 作者: rapoo

求一个能灵活调用的无缝滚动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 "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML><HEAD><TITLE>job5156roll</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
#demo{
width:300px;
height:108px;
text-align:left;
border:0px solid #000;
overflow: hidden;
line-height: 14px;
}
#demo1,#demo2{
margin:0px;
padding:0px;
border:0px;
}
#demo1 a,#demo2 a{
font-size:12px;
display:block;
padding:2px;
}
</style>
<BODY>
<div id=demo>
<div id=demo1>
<a href="#" target=_blank>每日免费外教,预约热线1.</a>
<a href="#" target=_blank>每日免费外教,预约热线2.</a>
<a href="#" target=_blank>每日免费外教,预约热线3.</a>
<a href="#" target=_blank>每日免费外教,预约热线4.</a>
<a href="#" target=_blank>每日免费外教,预约热线5.</a>
<a href="#" target=_blank>每日免费外教,预约热线6.</a>
<a href="#" target=_blank>每日免费外教,预约热线7.</a>
<a href="#" target=_blank>每日免费外教,预约热线8.</a>
</DIV>
<DIV id=demo2></DIV>
</DIV>
</BODY></HTML>
<SCRIPT>
<!--
var speed= 10;//滚动速度
var rows= 18;//每行高度
var stim= 90; //停留时间倍数 * speed
var stop= 0; //初始化值,不管
document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
function Marquee(){
if(document.getElementById("demo").scrollTop%rows==0 && stop<=stim){
stop++;
return;
}
stop = 0;
if(document.getElementById("demo2").offsetTop-document.getElementById("demo").scrollTop<=0)
document.getElementById("demo").scrollTop-=document.getElementById("demo1").offsetHeight;
else{
document.getElementById("demo").scrollTop++;
}
}
var MyMar = setInterval(Marquee,speed);
document.getElementById("demo").onmouseover = function() {clearInterval(MyMar);}
document.getElementById("demo").onmouseout = function() {MyMar=setInterval(Marquee,speed);}
-->
</SCRIPT>







看看这个能不能满足你的要求.
[解决办法]
楼主应该按自己的思路去一步步去实现,因为你涉及的要求比较个性化,还是自己写比较好。
[解决办法]
我做个上传控件也做了N天了,有时的确是很难解决某些问题,我的要求比你还过份哈。还是等高人出现吧。

读书人网 >JavaScript

热点推荐