|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 請教圖片淡入淡出
我想做幾個圖片的淡入淡出，記得以前看過這樣的效果，但是現在找不到了，只好用文字來描述一下：兩張以上圖片，圖片1淡入-圖片2淡出-圖片2淡入-圖片3淡出……，請問這樣的效果怎麼做出來的？ :confused: |
| 沒有人教我，自己頂一下，等！~！~~！~ |
| 用Flash多好~ :rolleyes: |
<script language="JavaScript">
var picture1="http://www.photo100.com/xjtp001/smzz/smzz003.jpg"
var picture2="http://www.photo100.com/xjtp001/smzz/smzz002.jpg"
var picture2="http://www.photo100.com/xjtp001/smzz/smzz004.jpg"
var picture2="http://www.photo100.com/xjtp001/smzz/smzz010.jpg"
var picturewidth=300
var pictureheight=135
</script>
<script language="JavaScript">
if (document.all) {
document.write('<OBJECT ID="DAControl_Wipe" ')
document.write('STYLE="width:'+picturewidth+';height:'+pictureheight+'"')
document.write('CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">')
document.write('</OBJECT>')
m = DAControl_Wipe.MeterLibrary;
whatTransformation = new ActiveXObject("DXImageTransform.Microsoft.Wipe");
whatPictures = new Array();
whatPictures[0] = m.ImportImage(picture1);
whatPictures[1] = m.ImportImage(picture2);
forward = m.Interpolate(0, 1, 3);
back = m.Interpolate(1, 0, 2);
whatMovement = m.Sequence(forward, back).RepeatForever();
whatTransformation.GradientSize = 1.0;
whatTransformation.WipeStyle = 1;
theResult = m.ApplyDXTransform( whatTransformation, whatPictures, whatMovement );
DAControl_Wipe.Image = theResult.OutputBvr;
DAControl_Wipe.Start();
}
</script> |
多謝marvellous，謝謝！：）
|
| 可以用FLASH來做，將圖片導入後轉為位圖文件，然後設置淡入淡出的屬性就OK |
| 想進一步請教一下，哪句是控制淡入淡出速度的？ |
好像是這一句，但不知如何改：
forward = m.Interpolate(0, 1, 3);
back = m.Interpolate(1, 0, 2);
|
| 呵呵，我猜也是這兩個，還想請教確定下，那我就改改試試就知道了，還是要再感謝！ |
是的，就是這兩句了！
（0，1，3）中，「0」是控制圖片1在前面的時間，「1」是圖片2在後面的時間，「3」是控制淡出速度；（1，0，2）中則相反，不過各個位置的控制對像不變（圖片1，圖片2，速度）。應該是這樣吧 |
| That's all right! :) |
| 如果是這樣的話，又有個問題了，三張圖片以上，就不能用這段代碼了，是我理解錯了麼？如果不是，求教適合三張圖片以上的代碼，謝謝 |
| 頂~！~` |
<body onLoad="runSlideShow()">
<div id="FloatSlideShow" style="position:absolute;z-index:1000000">
<a href="#" target=_new>
<img border=0 src="http://www.smallrain.net/jsimg/1.jpg" name='SlideShow' width=150 height=100></a>
</div>
<script>
// =======================================
// more javascript from http://www.smallrain.net
// =======================================
// Set slideShowSpeed (milliseconds):
var slideShowSpeed = 3000
// Duration of crossfade (seconds) for IE:
var crossFadeDuration = 3
// Set the positioning variables, below:
// Negative numbers are relative to right (whereX) or bottom (whereY)
// Positive numbers are relative to left (whereX) or (whereY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image in the positioning
var whereX = 340;
var whereY = -233;
// Specify the image files:
var Pic = new Array() // don't touch this!
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.smallrain.net/jsimg/1.jpg'
Pic[1] = 'http://www.smallrain.net/jsimg/2.jpg'
Pic[2] = 'http://www.smallrain.net/jsimg/3.jpg'
Pic[3] = 'http://www.smallrain.net/jsimg/4.jpg'
Pic[4] = 'http://www.smallrain.net/jsimg/5.jpg'
// =======================================
// Do not edit *anything* below this line!
// =======================================
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var t;var j=0;var p=Pic.length;var preLoad=new Array();
for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();}
if (document.all || document.getElementById){document.images.SlideShow.src = preLoad[j].src;}else{
document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;}
if (document.all){document.images.SlideShow.filters.blendTrans.Play();}
j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);}
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatSS(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fss()',33);};return L;}
floatSS(whereX,whereY,'FloatSlideShow').Fss();
</script> |
| wow,that's so marvellous![img][/img] |
| 我今天想請教的效果是：用一個圖片鏈接層，層內放圖片，當點擊第一個圖片時實現層內圖片的淡入淡出又該怎麼控制呢？呵呵，先謝了 |
| up |
|
