連續滾動圖片的製作

來源:互聯網
上載者:User
  連續滾動的圖片,一般都是用Flash製作,現在我們使用Script製作同樣的效果:

  製作方法:

  單擊這裡查看一下示範效果 相關檔案:2004082021demo.htm 2004082021scroll.htm

  在頁面<body>~</body>相關位置加入代碼:
  <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頁面,插入相同大小的圖片若干張。為使它不停頓地連續播放,請在同一行中,連續插入圖片二至三次。類似於 2004082021demo.htm 檔案。
在每一張的圖片上,添加特效:
停頓效果代碼:onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果:style="cursor:hand
都添加至<img src="http://www.webjx.com/htmldata/2005-02-24/XXX.jpg">,也可以加入圖片的超級連結!
再建立2004082021scroll.htm分頁檔,該檔案為控製圖片滾動的頁面。在<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; 數位取值計算為:單張圖片的寬度像素 * 使用圖片張數
以我們的滾動效果來計算,使用的單張圖片寬度為120px,共使用5張,所以var limdex的數字值為600。

連續滾動的圖片的特效就製作完成了!

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。