|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
|
连续滚动的图片，一般都是用Flash制作，现在我们使用Script制作同样的效果：ACbLinux联盟
ACbLinux联盟
制作方法：ACbLinux联盟
ACbLinux联盟
单击这里查看一下演示效果 相关文件：2004082021demo.htm 2004082021scroll.htmACbLinux联盟
ACbLinux联盟
在页面<body>~</body>相关位置加入代码：ACbLinux联盟
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021demo.htm" width="100%"></iframe>ACbLinux联盟
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021scroll.htm" width=0></iframe>ACbLinux联盟
新建scrollimg-pic.htm页面，插入相同大小的图片若干张。为使它不停顿地连续播放，请在同一行中，连续插入图片二至三次。类似于 2004082021demo.htm 文件。ACbLinux联盟
在每一张的图片上，添加特效：ACbLinux联盟
停顿效果代码：onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()"ACbLinux联盟
手形效果：style="cursor:hand ACbLinux联盟
都添加至<img src="XXX.jpg">，也可以加入图片的超级链接！ACbLinux联盟
再新建2004082021scroll.htm页面文件，该文件为控制图片滚动的页面。在<head>~</head>中，加入代码：ACbLinux联盟
<SCRIPT language=JavaScript>ACbLinux联盟
<!--//ACbLinux联盟
var x = 0;ACbLinux联盟
var y = 0;ACbLinux联盟
var limdex = 600;ACbLinux联盟
var dest = 0;ACbLinux联盟
var distance = 0;ACbLinux联盟
var step = 0;ACbLinux联盟
var destination = 0;ACbLinux联盟
var on = true;ACbLinux联盟
function scrollit(destination) {ACbLinux联盟
step = 2;ACbLinux联盟
dest = destination;ACbLinux联盟
if (x<dest & x < limdex){ACbLinux联盟
while (x<dest) {ACbLinux联盟
step += (step / 7);ACbLinux联盟
x += step;ACbLinux联盟
parent.frames[0].scroll(x,0);ACbLinux联盟
} ACbLinux联盟
// top.main.scroll(dest,0);ACbLinux联盟
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }ACbLinux联盟
x = dest;ACbLinux联盟
}ACbLinux联盟
if (x > dest) {ACbLinux联盟
while (x>dest) {ACbLinux联盟
step += (step / 7);ACbLinux联盟
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }ACbLinux联盟
else break;ACbLinux联盟
}ACbLinux联盟
if(dest >= 0) { parent.frames[0].scroll(dest,0); }ACbLinux联盟
x = dest;ACbLinux联盟
}ACbLinux联盟
if (x<1) { parent.frames[0].scroll(1,0); x=1 }ACbLinux联盟
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }ACbLinux联盟
x = dest;ACbLinux联盟
}ACbLinux联盟
function scrollnow() {ACbLinux联盟
if (on){ACbLinux联盟
if (x < limdex & x >= 0 ) { ACbLinux联盟
parent.frames[0].scroll(x,0); ACbLinux联盟
x = x + 1; ACbLinux联盟
setTimeout('scrollnow()', 8); ACbLinux联盟
}ACbLinux联盟
else if (x < 0) { ACbLinux联盟
x = limdex;ACbLinux联盟
scrollnow();ACbLinux联盟
}ACbLinux联盟
else { ACbLinux联盟
x=0;ACbLinux联盟
scrollnow();ACbLinux联盟
}ACbLinux联盟
}ACbLinux联盟
}ACbLinux联盟
// *********************************ACbLinux联盟
// 去掉原来的stopscroll()ACbLinux联盟
function stopscroll() {ACbLinux联盟
if (on){ACbLinux联盟
on = false;ACbLinux联盟
}ACbLinux联盟
else {ACbLinux联盟
on = true;ACbLinux联盟
scrollnow();ACbLinux联盟
} ACbLinux联盟
}ACbLinux联盟
function startscroll() { on = true; scrollnow(); }ACbLinux联盟
function stop_start() { ACbLinux联盟
if (on){ on = false;}else { on = true;scrollnow();}ACbLinux联盟
}ACbLinux联盟
scrollnow();ACbLinux联盟
//***********************************ACbLinux联盟
//-->ACbLinux联盟
</SCRIPT>ACbLinux联盟
注意，代码中：var limdex=600; 数字的取值计算为：单张图片的宽度像素 * 使用图片张数 ACbLinux联盟
以我们的滚动效果来计算，使用的单张图片宽度为120px，共使用５张，所以var limdex的数字值为６００。ACbLinux联盟
ACbLinux联盟
连续滚动的图片的特效就制作完成了！
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
