HTMLは、画像の効果を泡

<スタイル> / * 头像气泡* / 
        .popHead { 
            位置：相対。/ * 国境：1pxの赤色の固体。* / 
            幅：14vw。
            高さ：33vw。
            オーバーフロー：隠されました; 
            左：85vw。
            テキスト - 揃える：センター;
            / * パディング左：2.5vw。* / 
        } 
        .popHead .scrollUlリー{ 
            位置：絶対。
            表示：インライン - ブロック。
            トップ：100％; 
            白 -

        
            
スペース：NOWRAP。
            Z -index：100 。
            背景：RGBA（0、0、0、0.5 ）。
            幅：7vw。
            高さ：7vw。
            国境 - 半径：12vw。
            リスト - スタイル：なし。
            右：1 .5vw。
            不透明度：1 ; 
        }
 </スタイル> // HTMLの 
<身体> 
の<div クラス = " popHead " > 
            <ulのクラス =

 "scrollUl " > 
                <LI> <IMG SRC = ""スタイル= " 高さ：100％;幅：100％; " /> </ LI> 
                <LI> <IMG SRC = ""スタイル= " 高さ：100％;幅：100％; " /> </ LI> 
                <LI> <IMG SRC = ""スタイル= " 高さ：100％;幅：100％; " /> </ LI> 
                <LI> <IMG SRC = ""スタイル= " 高さ：100％;幅：100％; " /> </ LI> 
             
            </ UL>


; 
$（関数（）{ 

        popHead（）; // 泡効果
        のvar popTimer = たsetInterval（関数（）{ 
            NUM ++ ;
             IF（NUM> = 4である。）{ 
                NUM = 0 ; 
            } 
            popHead（）; 
        }、1000年）。

}）; 


 // 画像バブル効果
    関数popHead（）{ 
        $（' .scrollUlリー' ）.EQ（NUM）.animate（{
             ' トップ'：' 0 '、
            ' 幅'：' 11vw ' 、
             ' 高'：' 11vw ' 、
             ' 不透明度'：0 
        }、3000 、関数（）{ 
            $（この上）の.css（{：' 100％'、幅：' 7vw '、高さ：' 7vw '、' 不透明'：1 }）; 
        }）; 
    }
</ SCRIPT>