你现在的位置:首页DW学习》一招一式

 

图片水平滚动方法二

 

   这是六月海为我提供的一组代码,具体操作分如下三步进行,可以修改图片宽度 width=150和高度 height=100 (全部),替换自己的图片连接地址"1.jpg"--"9.jpg"。在这张网页里,我修改了高度为150;加了兰色边框,宽度改为90%。

 1.将下面的代码复制到<body>~</body>里

<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="mq.htm" width="100%"></iframe>

<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="mqhx.htm" width=0></iframe>

 2.将mq.htm 文件放在同级目录下,文件内容如下

<TABLE border=0 cellPadding=0 cellSpacing=0 align="center">
<TBODY>
<TR>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "1.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "2.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "3.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "4.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "5.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "6.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "7.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "8.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "9.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "10.jpg"
width=150></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "1.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "2.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "3.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "4.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "5.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "6.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "7.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "8.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "9.jpg"
width=150 ></TD>
<TD width=150><IMG height=100
onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll(); src= "10.jpg" width=150></TD></TR></TBODY></TABLE>


 3.将mqhx.htm 文件放在同级目录下,文件内容如下


<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 1500;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;


function scrollit(destination) {
step = 2;
dest = destination;
if (x <dest & x < limdex){
while (x <dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x >dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x <1) { parent.frames[0].scroll(1,0); x=1 }
if (x >limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}

function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);

x = x + 1;

setTimeout('scrollnow()', 8);

}
else if (x < 0) {

x = limdex;
scrollnow();
}
else {

x=0;
scrollnow();
}
}

// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}

}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}

scrollnow();

//***********************************

//-->

</SCRIPT>

2006年4月2日

返回主页