小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

HTML網(wǎng)頁(yè)上連續(xù)滾動(dòng)圖片的制作

 黯然神傷 2009-01-20

HTML網(wǎng)頁(yè)上連續(xù)滾動(dòng)圖片的制作

[日期:2008-05-13] 來源:  作者: [字體: ]

制作方法:

  單擊這里查看一下演示效果 相關(guān)文件:2004082021demo.htm 2004082021scroll.htm

  在頁(yè)面<body>~</body>相關(guān)位置加入代碼:
  <iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021demo.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021scroll.htm" width=0></iframe>

新建scrollimg-pic.htm頁(yè)面,插入相同大小的圖片若干張。為使它不停頓地連續(xù)播放,請(qǐng)?jiān)谕恍兄?,連續(xù)插入圖片二至三次。類似于 2004082021demo.htm 文件。
在每一張的圖片上,添加特效:
停頓效果代碼:onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果:style="cursor:hand
都添加至<img src="XXX.jpg">,也可以加入圖片的超級(jí)鏈接!
再新建2004082021scroll.htm頁(yè)面文件,該文件為控制圖片滾動(dòng)的頁(yè)面。在<head>~</head>中,加入代碼:
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
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>

注意,代碼中:var limdex=600; 數(shù)字的取值計(jì)算為:單張圖片的寬度像素 * 使用圖片張數(shù)
以我們的滾動(dòng)效果來計(jì)算,使用的單張圖片寬度為120px,共使用5張,所以var limdex的數(shù)字值為600。

連續(xù)滾動(dòng)的圖片的特效就制作完成了!

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多