網站首頁沒有一點動畫怎麼可以,我以前用過Flash As3做過圖片切換,效果非常不錯,可是麻煩,改變起來麻煩。一直想自己做個圖片切換效果,總認為比較麻煩,今天自己實踐了一下,其實還比較簡單。不過有個小問題,IE8不相容模式下 設定有透明效果的div 樣式添加失效了,但是我用谷歌,IE8兼容測試都ok。
反正是給自己記錄的,也不多話了,js沒有跟頁面分離,也沒有做出插件。一個網站要不了幾個這種效果,先實現了再說吧。最後的效果還是很高大上的。
頁 JS代碼
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
圖片切換
頭>
8 7
地
3
title="2" onclick="返回 picChange(2)">2
onclick=" return picChange(1)" class="">1
身體>
css 的實作
複製程式碼程式碼如下:
.picMain
{
邊距:自動;
溢位:隱藏;
寬度:1000px;
高度:400px;
位置:相對;
}
.picimg
{
寬度:10000px;
高度:400px;
背景顏色:#000000;
位置:絕對;
上方:0px;
}
.pic備註
{
位置:絕對;
寬度:500px;
高度:50px;
底部:0px;
左:0px;
顏色:#FFFFFF;
文字縮排:2em;
}
.pic備註
{
顏色:#FFFFFF;
文字裝飾:無;
}
.pic備註a:懸停
{
文字修飾:底線;
}
.picaction
{
位置:絕對;
寬度:1000px;
高度:50px;
背景顏色:#000000;
過濾器:alpha(不透明度=50);
-moz-不透明度:0.5;
不透明度:0.5;
溢位:自動;
底部:0px;
左:0px;
文字對齊:右;
}
.picaction a
{
邊框:1px實線#C0C0C0;
寬度:30px;
高度:30px;
浮動:右;
行高:30px;
文字裝飾:無;
文字對齊:居中;
顏色:#FFFFFF;
字體粗細:粗體;
上邊距:10px;
顯示:塊;
右距:10px;
}
.pic
{
寬度:1000px;
高度:400px;
浮動:左;
}
.picselect
{
背景顏色:#919191;
}