L'exemple de cet article décrit l'implémentation de jQuery qui peut contrôler l'effet d'angle de rotation de l'image. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :
Cliquez ici pour voir la démonstration en ligne .
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css" >
img { margin-top:100px; margin-left:400px; width:300px; border:3px solid #F2F2F2; height:300px; box-shadow:4px 4px 4px #DDDDDD;}
input { margin-top:10px; margin-left:480px; }
</style>
<script type="text/javascript" >
window.onload = function () {
document.getElementById('range').onchange = function () {
var value = this.value;
$("img").css({ "transform": "skewX(" + value + "deg)", "-webkit-transform": "skewX(" + value + "deg)", "-moz-transform": "skewX(" + value + "deg)" });
}
}
</script>
</head>
<body>
<img src="3.jpg" alt=""/>
<br /><br />
<input type="range" id="range" value="0" />
</body>
</html>
Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.
Les lecteurs intéressés par plus de contenu lié aux effets spéciaux jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets spéciaux jQuery classiques courants" et "Résumé de l'animation jQuery et utilisation d'effets spéciaux".
J'espère que cet article sera utile à tous ceux qui programment jQuery.
Comment modifier le texte dans l'image
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Que faire si l'image intégrée ne s'affiche pas complètement
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
