recherche

Maison >interface Web >js tutoriel >partage de code d'agrandissement de défilement d'image jquery (2)_jquery

partage de code d'agrandissement de défilement d'image jquery (2)_jquery

WBOY
WBOYoriginal
2016-05-16 15:41:571218parcourir

L'exemple de cet article décrit l'effet de défilement et d'agrandissement des images jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code basé sur jquery qui implémente des effets de défilement et d'agrandissement d'image. Il ressemble à une loupe et convient à l'affichage des produits pour permettre aux utilisateurs de parcourir les détails du produit.
Exécution des rendus : ----------------------------------------------- -------------------------------------------------- ---------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.

Le code d'effet de défilement et de zoom d'image jquery partagé avec vous est le suivant 



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动条放大效果 -</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
 <div id="content">
 <h1>jquery图片滚动条放大效果</h1>
 <div class="scroller demo1">
 <div class="inside">
 <a href="#"><img src="images/img1.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img2.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img3.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img4.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img5.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img6.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img7.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img8.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img9.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img10.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img11.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img12.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img13.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img14.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img15.jpg" alt="partage de code dagrandissement de défilement dimage jquery (2)_jquery" /></a>
 </div>
 </div>
 </div>
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
<script type="text/javascript">
$(function(){
 $(".demo1").scroller();
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>
</body>
</html>
Ce qui précède est le code d'effet de grossissement de défilement d'image jquery partagé avec vous, j'espère que vous pourrez l'aimer.

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：JS implémente l'imitation des compétences code_javascript du menu de la barre des tâches inférieure d'AppleArticle suivant：JS implémente l'imitation des compétences code_javascript du menu de la barre des tâches inférieure d'Apple

Articles Liés

Voir plus