熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

連續滾動圖片的制作

2013-11-15 11:48:28  來源: JSP教程 
連續滾動的圖片一般都是用Flash制作現在我們使用Script制作同樣的效果

  制作方法

  單擊這裡查看一下演示效果 相關文件

  在頁面<body>~</body>相關位置加入代碼
  <iframe frameborder=no height= marginheight= marginwidth= name=mq scrolling=no src= width=%></iframe>
<iframe frameborder=no height= marginheight= marginwidth= name=mq scrolling=no src= width=></iframe>
新建頁面插入相同大小的圖片若干張為使它不停頓地連續播放請在同一行中連續插入圖片二至三次類似於 文件
在每一張的圖片上添加特效
停頓效果代碼onmouseout=javascript:parentframes[]startscroll(); onmouseover=javascript:parentframes[]stopscroll()
手形效果XXXjpg>也可以加入圖片的超級鏈接!
再新建頁面文件該文件為控制圖片滾動的頁面在<head>~</head>中加入代碼
<SCRIPT language=JavaScript>
<!//
var x = ;
var y = ;
var limdex = ;
var dest = ;
var distance = ;
var step = ;
var destination = ;
var on = true;
function scrollit(destination) {
step = ;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / );
x += step;
parentframes[]scroll(x);
}
// topmainscroll(dest);
if(dest <=limdex) { parentframes[]scroll(dest); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / );
if(x >= (+step)) { x = step; parentframes[]scroll(x); }
else break;
}
if(dest >= ) { parentframes[]scroll(dest); }
x = dest;
}
if (x<) { parentframes[]scroll(); x= }
if (x>limdex) { parentframes[]scroll(limdex); x=limdex }
x = dest;
}
function scrollnow() {
if (on){
if (x < limdex & x >= ) {
parentframes[]scroll(x);
x = x + ;
setTimeout(scrollnow() );
}
else if (x < ) {
x = limdex;
scrollnow();
}
else {
x=;
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=; 數字的取值計算為單張圖片的寬度像素 * 使用圖片張數
以我們的滾動效果來計算使用的單張圖片寬度為px共使用5張所以var limdex的數字值為600

連續滾動的圖片的特效就制作完成了!
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19652.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.