Parlons de certains des effets que jquery+css peut obtenir

Avec le développement continu de la technologie Internet, la conception des pages Web est devenue de plus en plus colorée. Grâce à jQuery et CSS, divers effets spéciaux peuvent être obtenus pour rendre les pages Web plus belles et plus intéressantes. Cet article présentera quelques effets d'implémentation de l'utilisation de jQuery et CSS dans la conception Web.

1. Effet carrousel d'images

Dans les pages Web, les images carrousel sont un effet spécial courant et peuvent être utilisées pour afficher des produits, des publicités, etc. De nombreux effets de carrousel différents peuvent être créés via jQuery et CSS, tels que le glissement vers la gauche et la droite, les fondus entrants et sortants, le zoom et d'autres effets. Voici un exemple de code pour obtenir l'effet carrousel d'images coulissantes vers la gauche et la droite :

Code HTML :

<div class="slider">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
    </ul>
</div>

Code CSS :

.slider {
    position: relative;
    overflow: hidden;
}
.slider ul {
    list-style: none;
    position: absolute;
    width: 300%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.slider li {
    float: left;
    width: 33.3333%;
    height: 100%;
    display: block;
}
.slider img {
    width: 100%;
    height: 100%;
    display: block;
}

Code JavaScript :

$(document).ready(function() {
    var currentIndex = 0,
        items = $('.slider li'),
        itemAmount = items.length;
  
    function cycleItems() {
        var item = $('.slider li').eq(currentIndex);
        items.hide();
        item.css('display','inline-block');
    }
  
    var autoSlide = setInterval(function() {
        currentIndex += 1;
        if (currentIndex > itemAmount - 1) {
            currentIndex = 0;
        }
        cycleItems();
    }, 3000);
});

2. Effet de menu déroulant

Menus déroulants sont souvent utilisés dans la conception de sites Web. L'un des éléments pouvant être utilisés pour mettre en œuvre des menus à plusieurs niveaux permet aux utilisateurs de mieux comprendre la structure de navigation du site Web. En utilisant jQuery et CSS, vous pouvez obtenir divers effets de menu déroulant, tels que le survol de la souris, le clic, le glissement et d'autres formulaires interactifs. Voici un exemple de code pour un menu déroulant qui implémente un effet de survol de la souris :

Code HTML :

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">Our Company</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Testimonials</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Code CSS :

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav li {
    position: relative;
    float: left;
    width: 150px;
    text-align: center;
    margin-right: 5px;
}
.nav a {
    display: block;
    padding: 5px 10px;
    color: #333;
    background-color: #f2f2f2;
}
.nav a:hover {
    background-color: #333;
    color: #fff;
}

/* 下拉菜单 */
.nav ul {
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.nav ul li {
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
}
.nav ul a {
    padding: 5px 10px;
    background-color: #ccc;
    color: #333;
    display: block;
}
.nav ul a:hover {
    background-color: #333;
    color: #fff;
}

Code JavaScript :

$(document).ready(function() {
    $('.nav li').hover(
        function () {
            $('ul', this).slideDown(100);
        },
        function () {
            $('ul', this).slideUp(100);
        }
    );
});

3. Effet de défilement

L'effet de défilement peut créer des pages Web. plus dynamique et intéressant. Divers effets de défilement peuvent être obtenus à l'aide de jQuery et CSS, tels que le défilement fluide, le défilement vers une position spécifiée, etc. Voici un exemple de code pour obtenir un effet de défilement fluide :

Code HTML :

<ul class="nav">
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
</ul>

<div id="section-1" class="section">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum tellus in lorem tristique porttitor. Sed euismod, metus vel elementum commodo, leo ante suscipit lorem, in aliquet sapien augue vitae odio.</p>
</div>
<div id="section-2" class="section">
    <h2>Section 2</h2>
    <p>Sed euismod, metus vel elementum commodo, leo ante suscipit lorem, in aliquet sapien augue vitae odio. Nullam vestibulum tellus in lorem tristique porttitor.</p>
</div>
<div id="section-3" class="section">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum tellus in lorem tristique porttitor. Sed euismod, metus vel elementum commodo, leo ante suscipit lorem, in aliquet sapien augue vitae odio.</p>
</div>
<div id="section-4" class="section">
    <h2>Section 4</h2>
    <p>Sed euismod, metus vel elementum commodo, leo ante suscipit lorem, in aliquet sapien augue vitae odio. Nullam vestibulum tellus in lorem tristique porttitor.</p>
</div>

Code CSS :

.section {
    margin: 100px 0;
    padding: 50px;
    background-color: #f2f2f2;
}

Code JavaScript :

$(document).ready(function() {
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 500);
        return false;
    });
});

Ci-dessus sont trois exemples de codes pour obtenir des effets en utilisant respectivement jQuery et CSS, image lecture de la molette, menus déroulants et effets de défilement. Avec le développement de la technologie, de nombreux autres effets peuvent être obtenus. Tant que vous ajoutez de la créativité et de l'imagination, vous pouvez créer des effets de conception Web plus cool.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!