首頁 > web前端 > js教程 > 主體

Jquery 實作grid綁定模板_jquery

WBOY
發布: 2016-05-16 16:17:29
原創
1136 人瀏覽過

網站首頁沒有一點動畫怎麼可以,我以前用過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">

    圖片切換
   
   
    頭>

   

       

            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
            Jquery 實作grid綁定模板_jquery
       

       
       

            測試介紹文件了啊

   

身體>



 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;
}
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板