communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jquery obtient l'effet de défilement horizontal des images

jquery obtient l'effet de défilement horizontal des images

不言
Libérer： 2018-07-02 15:58:48
original
2370 Les gens l'ont consulté

Cet article présente principalement jquery pour obtenir l'effet de défilement horizontal des images. C'est un code très pratique et il est recommandé à tous les amis dans le besoin de s'y référer.

L'exemple de cet article décrit l'effet de défilement horizontal des images à l'aide de jquery. J'aimerais le partager avec vous pour votre référence. Les détails sont les suivants :
Rendu de l'opération : -------------------Voir l'effet---------------- --

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code jquery que j'ai partagé avec vous pour obtenir l'effet de défilement horizontal des images est le suivant 

<HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<TITLE>jquery实现图片水平滚动效果</TITLE>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>

<!--演示内容开始-->
<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>
<p class="artist_flow_contn">
 <UL id="flip" class="ui-jcoverflip">
  <LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>
  <LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>
  <LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>
  <LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>
  <LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>
  <LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">p+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>
  <LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN></LI>
  <SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">p+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>
 </UL>
 <p id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A 
style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all" 
href="#"></A></p>
</p>
<SCRIPT type="text/javascript">
$(document).ready(function(){

 // cover flip effects //
 //var noOfArtists = 31; //jx
 var noOfArtists = 7; //jx
 
 $(&#39;#flip&#39;).jcoverflip({
 current: 0,
 
 beforeCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: Math.max(10, 120 - 0 * offset * offset) + &#39;px&#39;
  }, {})];
 },
 afterCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 + 100 + 130 * offset) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: Math.max(10, 120 - 0 * offset * offset) + &#39;px&#39;
  }, {})];
 },
 currentCss: function(el, container){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 80) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: &#39;160px&#39;
  }, {})];
 },
 change: function(event, ui){
  //jx $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, ui.to * 10);
  $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, ui.to * (100 / (noOfArtists - 1))); //jx
 }
 });
 
 $(&#39;#scrollbar&#39;).slider({
 //jx value: 50,
 value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
 //jx step: 10,
 step: 100 / (noOfArtists - 1), //jx
 stop: function(event, ui){
  if (event.originalEvent) {
  //jx var newVal = Math.round(ui.value / 10);
  var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
  $(&#39;#flip&#39;).jcoverflip(&#39;current&#39;, newVal);
  //jx $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, newVal * 10);
  $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, newVal / (noOfArtists - 1) * 100); //jx
  }
 }
 });
 // cover flip effects //

});
</SCRIPT>
<!--演示内容结束-->

</BODY>
</HTML>
Copier après la connexion

Ce qui précède est l'intégralité contenu de cet article, j'espère qu'il sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP en chinois !

Recommandations associées :

La fonction de visualisation du texte intégral basée sur jQuery

Utilisation de jQuery pour implémenter la suspension de l'ID de @ dans WordPress Afficher le contenu des commentaires

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!

Étiquettes associées：
jquery实现滚动效果 jquery滚动效果 jquery水平滚动 jquery实现图片滚动
source：php.cn
Article précédent：L'effet spécial de la correspondance du lien de la barre d'adresse jquery et d'un lien d'étiquette Article suivant：À propos des tests automatisés d'Angular.Js
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ? J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...
Depuis 2024-04-06 16:29:50
0
2
490
Ajoutez des valeurs supplémentaires aux champs de données de format affichés à l'aide de javascript J'essaie d'y parvenir : je souhaite créer un formulaire qui collecte les données saisies p...
Depuis 2024-04-04 15:17:13
0
1
3589
Créez un effet de survol qui transforme le bouton de menu en forme de X avec une version clone ombré Tout d'abord, je tiens à admettre que mon titre prête à confusion et j'en suis désolé. Ce ...
Depuis 2024-04-04 11:55:21
0
2
315
Comment puis-je transformer le texte en un nouvel élément (comme un séparateur) lorsque je clique dessus ? J'essaie de trouver un moyen de faire en sorte que certains textes de la page se transform...
Depuis 2024-04-04 11:21:03
0
1
3580
Créez diverses mises en page de cartes à l'aide d'une seule grille ou de Flex : un guide pratique J'essaie de créer une mise en page de carte réactive comme celle illustrée. Ce que je fais...
Depuis 2024-04-02 21:07:36
0
2
377
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal