recherche

Maison  >  Article  >  interface Web  >  image jquery faire pivoter et agrandir

image jquery faire pivoter et agrandir

王林
王林original
2023-05-12 09:45:06654parcourir

Avec les progrès de la technologie Internet, la conception de sites Web devient de plus en plus créative. En conception, il est souvent nécessaire d’utiliser des effets de rotation et d’agrandissement de l’image pour améliorer l’effet visuel de la page. C’est aussi un effet que la plupart des designers apprécient beaucoup. Par conséquent, dans cet article, nous présenterons comment faire pivoter et agrandir des images à l’aide de jQuery.

1. Obtenir un effet de rotation d'image

Avant de réaliser l'effet de rotation, nous devons d'abord avoir une certaine compréhension du plug-in jQuery.rotate.js. Ce plug-in est une bibliothèque JavaScript développée sur la base de jQuery, qui permet d'obtenir des effets de rotation d'image.

Voici le code pour obtenir l'effet de rotation : 

html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery旋转图片</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryrotate/2.3/jqueryrotate.min.js"></script>
    <style type="text/css">
        .image {
            margin: 20px auto;
            width: 200px;
            height: 200px;
        }
        .image img {
            border: 1px solid #ddd;
        }
        .image .rotate {
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            // 绑定旋转按钮的事件
            $('.rotate').click(function(){
                $('.image img').rotate({
                    angle: 45,
                    animateTo: 90
                });
            });
        });
    </script>
</head>
<body>
    <div class="image">
        <img src="image.jpg" alt="image" />
        <div class="rotate">
            <input type="button" value="旋转图片" />
        </div>
    </div>
</body>
</html>

Après avoir introduit les trois fichiers jQuery.js, jQuery-ui.js et jQuery-rotate.js, nous Vous pouvez obtenir l'effet de rotation de l'image. La méthode d'implémentation spécifique est la suivante :

1. Ajoutez des liens vers les fichiers jQuery.js, jQuery-ui.js et jQuery-rotate.js dans la balise head.

2. Définissez les styles associés dans la balise de style, y compris les styles des images et des boutons rotatifs.

3. Définissez le contenu HTML pertinent de l'image dans la balise body, y compris le bouton de rotation et le conteneur d'image.

4. Implémentez la rotation de l'image dans la balise de script. La méthode d'implémentation spécifique est la suivante :

(1) Lier l'événement du bouton de rotation.

(2) Utilisez le plug-in jQuery.rotate.js pour obtenir l'effet de rotation de l'image.

Dans le code ci-dessus, nous utilisons le plug-in jQuery.rotate.js pour faire pivoter l'image. Parmi eux, la classe .rotate représente le bouton de rotation et la classe .image représente le conteneur d'images. En cliquant sur le bouton de rotation, nous utilisons la fonction .rotate() et ses paramètres pour faire pivoter l'image. Parmi eux, le paramètre angle représente l'angle de rotation, et le paramètre animateTo représente le temps nécessaire à la rotation pour atteindre l'angle cible, en millisecondes.

2. Obtenez un effet de grossissement de l'image

En plus de l'effet de rotation, l'effet de grossissement de l'image est également très populaire. Ensuite, nous présenterons comment utiliser jQuery pour obtenir l'effet d'agrandissement des images.

1. Utilisez la transformation CSS3 pour obtenir un effet d'agrandissement d'image

L'attribut de transformation CSS3 peut obtenir un effet d'agrandissement d'image simple. Nous pouvons utiliser la fonction animate() de jQuery pour réaliser des changements dynamiques dans l'attribut de transformation CSS3. Voici le code pour obtenir l'effet de zoom : 

html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery放大图片</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style type="text/css">
        .image {
            margin: 20px auto;
            width: 200px;
            position: relative;
        }
        .image img {
            border: 1px solid #ddd;
        }
        .image .zoom {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            right: 0;
            border: 1px solid #ddd;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            // 绑定放大按钮的事件
            $('.zoom').click(function(){
                $('.image img').animate({
                    height: '400px'
                }, 500);
            });
        });
    </script>
</head>
<body>
    <div class="image">
        <img src="image.jpg" alt="image" />
        <div class="zoom"></div>
    </div>
</body>
</html>

Parmi eux, nous devons ajouter un conteneur de zoom au conteneur d'image pour stocker le bouton de zoom. La méthode d'implémentation spécifique est la suivante :

1 Ajoutez un lien vers le fichier jQuery.js dans la balise head.

2. Définissez les styles associés dans la balise de style, y compris les styles des images et des boutons d'agrandissement.

3. Définissez le contenu HTML pertinent de l'image dans la balise body, y compris le bouton d'agrandissement et le conteneur d'image.

4. Implémentez le grossissement de l'image dans la balise de script. La méthode d'implémentation spécifique est la suivante :

(1) Lier l'événement du bouton de grossissement.

(2) Utilisez la fonction animate() de jQuery pour obtenir des changements hautement dynamiques dans les images.

Dans le code ci-dessus, nous utilisons la fonction .zoom() pour lier le bouton de zoom. Lorsque vous cliquez sur le bouton, nous utilisons la fonction animate() pour modifier la hauteur de l'image de 200 px d'origine à 400 px. Le temps d'effet d'animation est de 500 ms.

2. Utilisez jQuery pour agrandir l'image

Si vous avez besoin d'obtenir un effet de grossissement plus complexe, nous pouvons utiliser des plug-ins liés à jQuery. Voici le code pour obtenir l'effet de grossissement : 

html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery放大图片</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-zoom/1.8.13/jquery.zoom.min.js"></script>
    <style type="text/css">
        .image {
            margin: 20px auto;
            width: 200px;
            height: 200px;
        }
        .image img {
            border: 1px solid #ddd;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            // 绑定放大按钮的事件
            $('.image img').zoom({
                url: 'image-big.jpg'
            });
        });
    </script>
</head>
<body>
    <div class="image">
        <img src="image-small.jpg" alt="image" />
    </div>
</body>
</html>

Parmi eux, nous utilisons le plug-in jquery-zoom.js pour obtenir un grossissement de l'image. La méthode d'implémentation spécifique est la suivante :

1 Ajoutez des liens vers les fichiers jQuery.js et jquery-zoom.js dans la balise head.

2. Définissez les styles associés dans la balise style, y compris le style de l'image.

3. Définissez le contenu HTML pertinent de l'image dans la balise body.

4. Utilisez la fonction .zoom() dans la balise script pour zoomer sur l'image. Parmi eux, le paramètre url représente le chemin de l'image agrandie.

Dans le code ci-dessus, nous utilisons la fonction .zoom() pour obtenir l'effet de zoom de l'image. Lorsque vous faites défiler la molette de la souris, l'image change dynamiquement, obtenant un effet de grossissement. Il convient de noter que l'image doit être une image haute définition, sinon la qualité de l'image sera floue après l'agrandissement.

3. Réalisez l'effet de rotation et de grossissement de l'image

En plus de réaliser l'effet de rotation et de grossissement de l'image séparément, il est parfois nécessaire de réaliser la rotation et effet de grossissement de l'image en même temps. À ce stade, nous pouvons combiner les deux effets ci-dessus. Le code est le suivant : 

html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery旋转放大图片</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryrotate/2.3/jqueryrotate.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-zoom/1.8.13/jquery.zoom.min.js"></script>
    <style type="text/css">
        .image {
            margin: 20px auto;
            width: 200px;
            height: 200px;
            position: relative;
        }
        .image img {
            border: 1px solid #ddd;
        }
        .image .zoom {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            right: 0;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .image .rotate {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #ddd;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            // 绑定放大按钮的事件
            $('.image img').zoom({
                url: 'image-big.jpg'
            });

            // 绑定旋转按钮的事件
            $('.rotate').click(function(){
                $('.image img').rotate({
                    angle: 45,
                    animateTo: 90
                });
            });
        });
    </script>
</head>
<body>
    <div class="image">
        <img src="image-small.jpg" alt="image" />
        <div class="zoom"></div>
        <div class="rotate"></div>
    </div>
</body>
</html>

Dans le code ci-dessus, nous utilisons les deux effets ci-dessus en combinaison. La méthode d'implémentation spécifique est la suivante :

1. Ajoutez des liens vers les quatre fichiers jQuery.js, jquery-ui.js, jquery-rotate.js et jquery-zoom.js dans la balise head.

2. Définissez les styles associés dans la balise de style, y compris les styles des images, les boutons d'agrandissement et les boutons de rotation.

3. Définissez le contenu HTML pertinent de l'image dans la balise body, y compris les boutons de zoom et de rotation et les conteneurs d'images.

4. Implémentez l'effet de rotation et d'agrandissement de l'image dans la balise de script La méthode d'implémentation spécifique est la suivante :

(1) Utilisez la fonction .zoom(). pour obtenir l'effet de grossissement de l'image.

(2) Liez l'événement .click du bouton spin.

(3) Utilisez la fonction .rotate() pour obtenir l'effet de rotation de l'image.

Dans le code ci-dessus, nous utilisons les plug-ins jQuery.rotate.js et jquery-zoom.js pour obtenir les effets de rotation et de grossissement de l'image. En liant l'événement .click du bouton, nous pouvons contrôler l'image. L'effet global est très fluide et peut améliorer l'effet visuel de la page.

Résumé :

Dans la conception de sites Web, obtenir des effets de rotation et d'agrandissement d'image est devenu une exigence très fondamentale. En utilisant jQuery, nous pouvons obtenir des effets de rotation et d'agrandissement de l'image pour améliorer l'effet visuel de la page. Dans cet article, nous présentons trois méthodes d'implémentation et donnons le code correspondant. Je pense qu'en étudiant cet article, les lecteurs peuvent déjà maîtriser comment utiliser jQuery pour obtenir des effets de rotation et d'agrandissement d'image.

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!

JavaScript jquery css3 html JS 事件 transform ui zoom
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Est-ce que jquery l'a déjà fait ?Article suivant：Est-ce que jquery l'a déjà fait ?

Articles Liés

Voir plus