文字圖片切換效果

1. 怎麼做動態文字圖片

想製作動態圖片，首先需要知道一個概念，那就是幀，一張動態圖片是有許多的幀組成的，一個幀就是一張圖片，每張圖片都稍有不同，連接著快速切換，便形成了動態效果。
動態圖片的製作其實並不需要重復的製作每一個幀，我們可以只製作第一個和最後一個，然後採用過渡效果，就能很好的製作出一個動態圖片。
下面的製作過程、製作方法、製作思路是我從網上學習得到，但找不到原作者，但圖片是我自己製作的，所以就算是我原創的吧，下面教程開始，看仔細了哦！
END
動態圖教程
1
第一步是打開PS軟體，在軟體界面點擊文件--新建，出現如下界面，寬和高可以自己根據需要設定，背景色可以沒有，也可以設置為任何顏色；一切設置好後，點擊確定就創建好了一個新的圖片。

2
我們在左側工具欄略靠下方的位置選擇文字工具，然後在右側圖片上按下滑鼠左鍵，拖出一塊文字區域，寫入文字，我這里為大家舉例寫的「網路經驗，分享讓生活更簡單」，這里注意，文字的顏色在最上方工具條上點擊更改，我的文字顏色黑色不好，最後就是選中文字，點擊上方的文字顏色進行了更改。

3
文字輸入完成，下面我們進入下一個環節，新建一個圖層，在這個圖層上添加顏色，我這里的動態圖的「動」主要是提現在顏色的變動上，形狀的變動沒有涉及。
新建圖層的方法是點擊右下角的文件圖標。

圖層新建好了，添加顏色。點擊左側工具欄的漸變色圖標，出現如圖界面，點擊上方的小三角，選擇一個漸變的模式，我這里選擇的圖譜色帶。選擇不同的漸變模式效果有很大差別，有點廣告中文字從右到左閃亮一下，用的就是白色到透明模式，這里不再多說了，大家底下可以自己試試。

選擇好模式了，我們用滑鼠從左到右拉出一條線，松開左鍵就會出現圖片上的彩虹效果。

我們做的動態效果是讓文字的顏色一直按色譜變換，這個到底是怎麼變換的呢，下面可是重點了：
將滑鼠切換到選擇狀態，將圖片拖動到最左側。
後面的幀中讓此圖片一點一點的向右側移動，通過文字蒙版的效果，文字的顏色顯示的就是文字上方對應的圖片部位的顏色，圖片一直移動，所以文字的顏色也就看起來是一直變換的了。

因為要用到幀，這里調出時間軸，如圖點擊窗口--時間軸，點擊後工作區下方即會出現橫條時間軸。

點擊時間軸上的新建按鈕，新建出第二個幀，圖上大家可以看到，我就「永遠」圈了起來，這個是什麼意思呢，這個指的是圖片循環播放的次數，永遠即指的是一直循環播放下去，當然大家也可以選擇播放幾次後停止。

上一步驟新建出了第二個幀，選中第二個幀，在上面的工作區將色譜圖片向右移動，移動到一個適當的位置，比如將色譜圖片整體移動到最右側，只露出左邊緣，下圖有一定的干擾作用，大家不要全按照我的來哦，可以先隨便放個位置，一會添加過渡後再返回來調整。

這里就是添加過渡效果了，點擊圖中所示的圖標，設置相應的過渡幀數，這里我試驗了幾次，建議幀數多於20個，少的話動作會顯得太快。

上面的步驟操作完成，下一個重點又來了，創建剪切蒙版。
選中色譜的圖層，在其上右擊，選擇創建剪切蒙版，此時文字的顏色就會變成對應色譜部位的顏色。為什麼之前不先創建剪切蒙版呢，大家可能會這樣問，這樣做是為了方便調整色譜圖層，因為設置了這個效果之後色譜就看不到了，不利於之前拖動色譜的操作。

好了，到這一步就大功告成了，點擊最下方的播放三角箭頭試試效果如何吧，如果不滿意就返回調整，回到第9步重新操作；如果感覺很好了，那就點擊保存動態圖吧，如圖，點擊文件--保存為web格式的文件。

在如下界面點擊保存就ok了，學完這個操作，PS的界面操作你也就基本沒什麼大問題了。趕緊換別的效果試試吧！

2. 圖片上有文字的輪播怎樣實現點擊圓點切換圖片時文字不重疊

本文實例講述了js實現支持手機滑動切換的輪播圖片效果的方法。分享給大家供大家參考。具體如下：

運行效果如下：

完整實例代碼點擊此處本站下載。

使用方法案例:

?

1 2 3 4 5 6 7 <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js"></script> <script> $('.carousel-image').CarouselImage({ num :$('.carousel-num') }); </script>

或者requirejs：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="carousel-image"> <div> <a> <img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/> </a> <a> <img src="http://www.yoursiteweb.com/images/1430073252953.png"/> </a> <a> <img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/> </a> </div> <div class="carousel-num"> </div> </div> <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/require.js"></script> <script> requirejs.config({ //By default load any mole IDs from js/lib baseUrl: '../src', paths: { $: 'zepto' } }); require(['carousel-image',"$"], function(CarouselImage,$) { var cs = new CarouselImage(); cs.init({ target:$('.carousel-image'), num:$('.carousel-num') }); }); </script>

API 屬性、方法及回調：

target:

表示是在這個容器內的元素會觸發事件,它應該有個子級的容器，方便動畫的優化

num:

本意是以顯示當前索引的數字表示，但現在用樣式把數字隱藏了，如果要顯示數字樣式，可自行更改樣式文件

希望本文所述對大家的javascript程序設計有所幫助。

3. js圖片+文字切換

下面是我寫過的js類似flash的全碼:調用完全類同於flash

<script>
//-----WNum 為圖片寬度
//-----HNum 為圖片高度
//-----TNum 為文字高度(可為空 ,即不顯示)
function go_Img(WNum,HNum,TNum){
Go_Num=(imgUrl.length-1);key=0;adNum=0;theTimer='';
var C_lass;
var $=function $(str){return document.write(str);};
var C_ss="<style>";
C_ss=C_ss+"div{overflow:hidden;}";
C_ss=C_ss+".W_Ord{overflow;hidden;text-align:center;color:#F00;font-weight:bold;clear:both;width:"+WNum+"px;height:"+TNum+";background-color:#eee;}";
C_ss=C_ss+".Min_On{color:#fff;Float:right;background-color:#f00;cursor:pointer;width:30px;height:20px;padding-top:1px;border:1px solid #f60;text-align:center;font-weight:bold;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;}";
C_ss=C_ss+".Min_Off{color:#fff;Float:right;cursor:pointer;width:30px;height:20px;padding-top:1px;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;text-align:center;font-weight:bold;}";
C_ss=C_ss+"</style>";
$(C_ss);C_ss='';
$("<Div style='width:"+WNum+"px;height:"+HNum+"px;border:1px solid #eee;'>");
$("<div style='width:"+WNum+"px;height:"+HNum+"px;'><img style='Cursor:Pointer;Filter:revealTrans(ration=2,transition=12);width:"+WNum+"px;height:"+HNum+"px;' src='"+imgUrl[1]+"' name=imgInit onclick=go_Url();></Div>");
$("<div class='Rig' style='width:"+WNum+"px;height:20px;margin-top:-20px;'>");
for (var i=100;i>0 ;i=i-2){
$("<Div style='float:right;width:4px;height:20px;background-color:#000;filter:alpha(opacity="+i/2+");-moz-opacity:0."+i/20+";opacity: 0."+i/20+"; '></Div>");
}
$("</Div>");
$("<Div class='Rig' style='width:"+WNum+"px;height:"+HNum+"px;margin-top:-20px;'>");
for (var j=Go_Num;j>0 ;j--){
if (j==1){C_lass='Min_On';}else{C_lass='Min_Off';}
$("<Div Id='Min"+j+"' class='"+C_lass+"' onmouseover=nextAd("+j+");>"+j+"</Div>");
}
$("</Div>");
$("</Div>");
if (TNum && TNum!=''){
$("<Div Id='W_Ord' class='W_Ord'>"+imgWord[1]+"</Div>");
}
nextAd(1);
}
function nextAd(GetNum){
var O=function O(objid){return document.getElementById(objid);}
adNum=adNum%Go_Num;
adNum++ ;
if(GetNum!=undefined && GetNum!=0){adNum=GetNum;}
if(key==0){key=1;}
else if(document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
imgInit.filters.revealTrans.play();
if (document.all.W_Ord!=undefined){document.all.W_Ord.innerHTML=imgWord[adNum];}
for (var i=1;i<(Go_Num+1);i++ ){O('Min'+i).className='Min_Off';}
O('Min'+adNum).className='Min_On';
}
document.images.imgInit.src=imgUrl[adNum];
if (GetNum==undefined){theTimer=setTimeout(nextAd, 6000);}
else{clearTimeout(theTimer);theTimer=setTimeout(nextAd, 6000);}
}
function go_Url(jumpTarget){
jumpUrl=imgLink[adNum];
jumpTarget='_blank'; //_blank
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>

<script>
//-------建產數組
var imgUrl=new Array();
var imgLink=new Array();
var imgWord=new Array();
imgUrl[1]='http://hfxhyy.35hf.cn/back/UpPic/8vzrlf5v1czut.jpg';
imgLink[1]='http://hfxhyy.35hf.cn/Object.asp?StrId=20';
imgWord[1]='Six信息';
imgUrl[2]='http://hfxhyy.35hf.cn/back/UpPic/q6hxyzon6by4b.jpg';
imgLink[2]='http://hfxhyy.35hf.cn/Object.asp?StrId=18';
imgWord[2]='Five';
imgUrl[3]='http://hfxhyy.35hf.cn/back/UpPic/kdiqte-0rune7.jpg';
imgLink[3]='/Object.asp?StrId=17';
imgWord[3]='Four';
imgUrl[4]='http://hfxhyy.35hf.cn/back/UpPic/mrocr4k8v1f40.jpg';
imgLink[4]='http://hfxhyy.35hf.cn/Object.asp?StrId=16';
imgWord[4]='Three';
imgUrl[5]='http://hfxhyy.35hf.cn/back/UpPic/rsba4jy1m7mf6.jpg';
imgLink[5]='http://hfxhyy.35hf.cn/Object.asp?StrId=15';
imgWord[5]='Two';
imgUrl[6]='http://hfxhyy.35hf.cn/back/UpPic/ttqnfeij7_d8p.jpg';
imgLink[6]='http://hfxhyy.35hf.cn/Object.asp?StrId=14';
imgWord[6]='one';

// 調用方法
go_Img(290,205,20); //-----------------------------調用方法
</script>