Heim > Web-Frontend > js-Tutorial > Jquery implementiert die Rasterbindung template_jquery

Jquery implementiert die Rasterbindung template_jquery

WBOY
Freigeben: 2016-05-16 16:17:29
Original
1157 Leute haben es durchsucht

Wie kann es sein, dass die Homepage der Website keine Animation hat? Ich habe Flash As3 bereits zum Wechseln von Bildern verwendet und der Effekt ist sehr gut, aber es ist mühsam und schwierig, ihn zu ändern. Ich wollte schon immer selbst einen Bildwechseleffekt machen, aber ich dachte immer, das wäre mühsam. Ich habe es heute ausprobiert und festgestellt, dass es eigentlich relativ einfach ist. Es gibt jedoch ein kleines Problem: Im inkompatiblen Modus von IE8 schlägt das Hinzufügen eines Div-Stils mit transparentem Effekt fehl. Ich habe jedoch Google verwendet und der IE8-Kompatibilitätstest war in Ordnung.

Wie auch immer, ich habe es für mich selbst aufgezeichnet, daher werde ich nicht viel mehr sagen, und es werden keine Plug-Ins von der Seite erstellt. Einige dieser Effekte kann eine Website nicht haben, also lasst uns sie zuerst umsetzen. Der Endeffekt ist immer noch sehr beeindruckend.

Seite JS-Code

Code kopieren Der Code lautet wie folgt:




 
复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

    图片切换
   
   
   

   

       

           
           
           
           
           
           
           
           
       

       
       

            测试介绍文件了啊

   



 css的实现

复制代码 代码如下:

.picMain
{
    Rand: automatisch;
    Überlauf: versteckt;
    Breite: 1000px;
    Höhe: 400px;
    Position: relativ;
}
.picimg
{
    Breite: 10000px;
    Höhe: 400px;
    Hintergrundfarbe: #000000;
    Position: absolut;
    oben: 0px;
}
.picRemark
{
    Position: absolut;
    Breite: 500px;
    Höhe: 50px;
    unten: 0px;
    links: 0px;
    Farbe: #FFFFFF;
    Texteinzug: 2em;
}
.picRemark a
{
    Farbe: #FFFFFF;
    Textdekoration: keine;
}
.picRemark a:hover
{
    Textdekoration: unterstreichen;
}
.picaction
{
    Position: absolut;
    Breite: 1000px;
    Höhe: 50px;
    Hintergrundfarbe: #000000;
    Filter: Alpha(Deckkraft=50);
    -moz-Opazität: 0,5;
    Deckkraft: 0,5;
    Überlauf: automatisch;
    unten: 0px;
    links: 0px;
    Textausrichtung: rechts;
}
.picaction a
{
    Rand: 1 Pixel durchgehend #C0C0C0;
    Breite: 30px;
    Höhe: 30px;
    float: rechts;
    Zeilenhöhe: 30px;
    Textdekoration: keine;
    text-align: center;
    Farbe: #FFFFFF;
    Schriftstärke: fett;
    Rand oben: 10px;
    Anzeige: blockieren;
    Rand rechts: 10px;
}
.pic
{
    Breite: 1000px;
    Höhe: 400px;
    float: links;
}
.picselect
{
    Hintergrundfarbe: #919191;
}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage