recherche

Maison >interface Web >js tutoriel >jQuery peut contrôler l'effet d'angle de rotation de l'image (avec téléchargement du code source de démonstration)_jquery

jQuery peut contrôler l'effet d'angle de rotation de l'image (avec téléchargement du code source de démonstration)_jquery

WBOY
WBOYoriginal
2016-05-16 15:17:221590parcourir

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.

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：Initialiser les composants sans une seule compétence js code_javascriptArticle suivant：Initialiser les composants sans une seule compétence js code_javascript

Articles Liés

Voir plus