怎样用javascript实现页面滚动到指定的控件
展开全部
<HTML>
<HEAD>
<!-- 滚动区域坐标大小定位-->
<STYLE type=text/css>
#divContainer {
CLIP: rect(0px 294px 20px 0px); HEIGHT: 20px; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 294px
}
#divContent {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
</STYLE>
<SCRIPT language=JavaScript>
// 滚动开始
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()
var speed=0
var loop, timer
function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.';
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
//内容宽度
this.scrollWidth=bw.ns4?this.css.document.width:this.el.offsetWidth;
//显示区域宽度
this.clipWidth=bw.ns4?this.css.clip.width:this.el.offsetWidth;
this.left=MoveAreaLeft;
this.right=MoveAreaRight;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this;
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function MoveAreaRight(move){
//alert("this.scrollWidth="+this.scrollWidth+" objContainer.clipWidth="+objContainer.clipWidth+"\n"+" objContainer.clipWidth-this.scrollWidth="+(objContainer.clipWidth-this.scrollWidth)+"\n"+"this.x="+this.x);
document.getElementById("previous").style.display = "block";
document.getElementById("previousq").style.display = "block";
if(this.x>objContainer.clipWidth-this.scrollWidth){
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".right("+move+")",speed)
}
else{
document.getElementById("next").style.display = "none";
document.getElementById("nextq").style.display = "none";
}
}
function MoveAreaLeft(move){
document.getElementById("next").style.display = "block";
document.getElementById("nextq").style.display = "block";
if(this.x<0){
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".left("+move+")",speed)
}
else{
document.getElementById("previous").style.display = "none";
document.getElementById("previousq").style.display = "none";
}
}
//滚动方法
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.right(speed)
else objScroller.left(speed)
}
}
//停止滚动方法
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//初始化
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
if(objScroller.scrollWidth>objContainer.clipWidth){
document.getElementById("previous").style.display = "none";
document.getElementById("next").style.display = "block";
document.getElementById("previousq").style.display = "none";
document.getElementById("nextq").style.display = "block";
}
}
// 滚动结束
</SCRIPT>
</HEAD>
<BODY onload=InitialiseScrollableArea()>
<TABLE border=0 cellPadding=0 cellSpacing=0 height=300 width=360>
<TBODY>
<TR>
<TD background=ckh.files/a_r1_c2.jpg>
<!--滚动区域开始-->
<DIV id=divContainer style="LEFT: 50px; TOP: 50px; VISIBILITY: visible">
<DIV id=divContent>
<nobr>
但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了
</nobr>
</DIV>
</DIV>
<!--滚动区域结束 -->
</TD>
</TR>
<!--滚动按钮开始 -->
<tr>
<td id=starttd>
<DIV id="previousq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-200)>
快进左
</A>
</DIV>
<br><br>
<DIV id="previous">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-3)>
向左
</A>
</DIV>
</td>
<td>
<DIV id="next">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(3)>
向右
</A>
</DIV>
<br><br>
<DIV id="nextq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(200)>
快进右
</A>
</DIV>
</td>
</tr>
<!--滚动按钮结束 -->
</TBODY>
</TABLE>
</BODY>
</HTML>
<HEAD>
<!-- 滚动区域坐标大小定位-->
<STYLE type=text/css>
#divContainer {
CLIP: rect(0px 294px 20px 0px); HEIGHT: 20px; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 294px
}
#divContent {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
</STYLE>
<SCRIPT language=JavaScript>
// 滚动开始
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()
var speed=0
var loop, timer
function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.';
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
//内容宽度
this.scrollWidth=bw.ns4?this.css.document.width:this.el.offsetWidth;
//显示区域宽度
this.clipWidth=bw.ns4?this.css.clip.width:this.el.offsetWidth;
this.left=MoveAreaLeft;
this.right=MoveAreaRight;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this;
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function MoveAreaRight(move){
//alert("this.scrollWidth="+this.scrollWidth+" objContainer.clipWidth="+objContainer.clipWidth+"\n"+" objContainer.clipWidth-this.scrollWidth="+(objContainer.clipWidth-this.scrollWidth)+"\n"+"this.x="+this.x);
document.getElementById("previous").style.display = "block";
document.getElementById("previousq").style.display = "block";
if(this.x>objContainer.clipWidth-this.scrollWidth){
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".right("+move+")",speed)
}
else{
document.getElementById("next").style.display = "none";
document.getElementById("nextq").style.display = "none";
}
}
function MoveAreaLeft(move){
document.getElementById("next").style.display = "block";
document.getElementById("nextq").style.display = "block";
if(this.x<0){
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".left("+move+")",speed)
}
else{
document.getElementById("previous").style.display = "none";
document.getElementById("previousq").style.display = "none";
}
}
//滚动方法
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.right(speed)
else objScroller.left(speed)
}
}
//停止滚动方法
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//初始化
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
if(objScroller.scrollWidth>objContainer.clipWidth){
document.getElementById("previous").style.display = "none";
document.getElementById("next").style.display = "block";
document.getElementById("previousq").style.display = "none";
document.getElementById("nextq").style.display = "block";
}
}
// 滚动结束
</SCRIPT>
</HEAD>
<BODY onload=InitialiseScrollableArea()>
<TABLE border=0 cellPadding=0 cellSpacing=0 height=300 width=360>
<TBODY>
<TR>
<TD background=ckh.files/a_r1_c2.jpg>
<!--滚动区域开始-->
<DIV id=divContainer style="LEFT: 50px; TOP: 50px; VISIBILITY: visible">
<DIV id=divContent>
<nobr>
但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了
</nobr>
</DIV>
</DIV>
<!--滚动区域结束 -->
</TD>
</TR>
<!--滚动按钮开始 -->
<tr>
<td id=starttd>
<DIV id="previousq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-200)>
快进左
</A>
</DIV>
<br><br>
<DIV id="previous">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-3)>
向左
</A>
</DIV>
</td>
<td>
<DIV id="next">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(3)>
向右
</A>
</DIV>
<br><br>
<DIV id="nextq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(200)>
快进右
</A>
</DIV>
</td>
</tr>
<!--滚动按钮结束 -->
</TBODY>
</TABLE>
</BODY>
</HTML>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
