Maison > Article > interface Web > jquery obtient l'effet de défilement horizontal des images
jquery obtient l'effet de défilement horizontal des images
- 不言original
- 2018-07-02 15:58:482305parcourir
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
$('#flip').jcoverflip({
current: 0,
beforeCss: function(el, container, offset){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: Math.max(10, 120 - 0 * offset * offset) + 'px'
}, {})];
},
afterCss: function(el, container, offset){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 + 100 + 130 * offset) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: Math.max(10, 120 - 0 * offset * offset) + 'px'
}, {})];
},
currentCss: function(el, container){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 - 80) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: '160px'
}, {})];
},
change: function(event, ui){
//jx $('#scrollbar').slider('value', ui.to * 10);
$('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx
}
});
$('#scrollbar').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
$('#flip').jcoverflip('current', newVal);
//jx $('#scrollbar').slider('value', newVal * 10);
$('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx
}
}
});
// cover flip effects //
});
</SCRIPT>
<!--演示内容结束-->
</BODY>
</HTML>
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
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!
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：L'effet spécial de la correspondance du lien de la barre d'adresse jquery et d'un lien d'étiquetteArticle suivant：L'effet spécial de la correspondance du lien de la barre d'adresse jquery et d'un lien d'étiquette
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript