Effets spéciaux JS
effets jQuery
jQuery imite le changement d'image publicitaire sur la page d'accueil de 1688
jQuery imite le changement d'image publicitaire sur la page d'accueil de 1688
jQuery imite le changement d'image publicitaire sur la page d'accueil de 1688
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<title>jQuery首页广告图片切换 </title>
<style type="text/css">
div,ul,li,a,span,img{margin:0;padding:0;}
li{list-style:aucun;}
#slider{width:790px;height:340px;margin:10% auto;position:relative;}
.slider_list li{position:absolute;display:none;}
.slider_list li:first-child{display:block;}
.slider_icon{position:absolute;z-index:1;left:40%;bottom:20px;font-size:0;padding:4px 8px;border-radius:12px;background-color:hsla(0,0%, 100%,.3);}
.slider_icon i{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 5px;}
.btn{fond:#fff;}
.arrow{display:none;width:30px;height:60px;background-color:rgba(0,0,0,.2);position:absolute;top:50%;margin-top:-30px;}
.prve{gauche:0;}
.suivant{right:0;}
.arrow span{display:block;width:10px;height:10px;border-bottom:2px solid #fff;border-left:2px solid #fff;}
.slider_left{margin:25px 0 0 10px;transform:rotate(45deg);}
.slider_right{margin:25px 0 0 5px;transform:rotate(-135deg);}
.arrow:hover{background:#444;}
#slider:hover .arrow{display:block;}
.btn_act{fond:#db192a;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(fonction(){
nombre de var = 0;
var $li = $("#slider>ul>li");
$(".suivant").click(function(){
compte++;
si(compte == $li.length){
compte =0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
console.log(count);
});
$(".prve").click(function(){
compte--;
si(compte == -1){
compte = $li.length-1;
}
console.log(count);
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
});
$(".slider_icon i").mouseenter(function(){
$(this).addClass('btn_act').siblings().removeClass("btn_act");
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
count = $(this).index();
});
});
</script>
</tête>
<corps>
<div id="slider">
<ul class="slider_list">
<li><a href="#"><img src="img/59e5df51Na34c52da.jpg"></a></li>
<li><a href="#"><img src="img/59e6f772Nde97ca5e.jpg"></a></li>
<li><a href="#"><img src="img/59e8ab7dN48b529e7.jpg"></a></li>
<li><a href="#"><img src="img/59e89be7N0031c258.jpg"></a></li>
<li><a href="#"><img src="img/59e980a2Nc4314079.jpg"></a></li>
<li><a href="#"><img src="img/59ed6dd8Ncaee86ed.jpg"></a></li>
<li><a href="#"><img src="img/59e99072N4baea8f3.jpg"></a></li>
<li><a href="#"><img src="img/598abe52Nb1c8cfe4.jpg"></a></li>
</ul>
<div class="slider_icon">
<i class="btn btn_act"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</div>
<a href="javascript:;" class="flèche prve">
<span class="slider_left"></span>
</a>
<a href="javascript:;" class="flèche suivante">
<span class="slider_right"></span>
</a>
</div>
<div style="text-align:center;margin:50px 0; police:normal 14px/24px 'MicroSoft YaHei';">
</div>
</corps>
</html>
La crackée 1688 de jQuery est basée sur les photos et les images, et la crackée PHP est basée sur PHP.网。
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe
16 May 2016
De nos jours, il existe d'innombrables exemples de changements d'apparence de pages Web. Je ne les ai pas étudiés attentivement. J'ai juste vérifié les informations en ligne et j'ai résolu le problème. Je l'ai donc enregistré. Partagez avec vous comment implémenter l'émulation basée sur le code de changement d'image d'arrière-plan de changement de peau de la page d'accueil de Baidu, les amis dans le besoin peuvent s'y référer.
16 May 2016
Cet article présente principalement jQuery pour réaliser l'effet de fenêtre coulissante de détection des changements de souris sur la page d'accueil de Microsoft. Il s'agit d'un simple effet d'animation basé sur jQuery répondant aux événements de la souris. Les amis qui en ont besoin peuvent s'y référer.
Comment définir le délai dans jquery
26 Apr 2023
Dans le développement front-end, nous devons souvent utiliser jQuery pour gérer certains effets interactifs et effets d'animation, tels que les effets d'animation lorsque la souris survole, les effets d'animation lors du chargement de la page, etc. Mais il faut parfois fixer un délai pour que ces effets puissent mieux s'exprimer. Alors, comment jQuery définit-il un délai ? Cet article présentera ce problème en détail. 1. Méthode de retard dans jQuery Dans jQuery, l'effet de retard peut être facilement obtenu en utilisant la méthode delay(). La méthode delay() peut être utilisée
16 May 2016
Cet article vous présente l'encyclopédie des effets jquery pour créer des effets spéciaux pour les résultats des examens de santé informatiques et est accompagné de téléchargements de code source. Les amis intéressés par l'encyclopédie des effets jquery peuvent apprendre ensemble.
16 May 2016
animate() est une méthode en jquery qui peut être utilisée pour créer des effets d'animation. La méthode animate() en jquery ajoute de bons effets visuels à cette page.
16 May 2016
Cet article présente l'audition des effets sonores de l'événement de clic de souris jquery, les effets spéciaux obtenus à l'aide du plug-in jquery. Les amis intéressés peuvent apprendre ensemble.
les effets de frappe jquery arrêtent de supprimer
23 May 2023
Avec la popularité d'Internet, l'application des effets de frappe est de plus en plus répandue et les effets de frappe jquery sont devenus le premier choix de nombreux développeurs de sites Web. Cependant, lors du processus de réalisation de cet effet spécial, des problèmes détaillés affectent souvent l'expérience utilisateur, comme le problème de la suppression des effets spéciaux de frappe. Cet article explique comment utiliser les effets de frappe jquery pour arrêter la suppression et améliorer l'expérience de navigation de l'utilisateur. L'implémentation des effets de frappe jquery peut utiliser des plug-ins prêts à l'emploi, tels que typed.js et jQuery.Typewriter. Ces plug-ins sont basés sur jquery
jquery implémente des effets de défilement numérique
24 Apr 2018
Cette fois, je vais vous présenter jquery pour réaliser des effets spéciaux de défilement numérique. Quelles sont les précautions à prendre pour jquery pour réaliser des effets spéciaux de défilement numérique ?
Explication détaillée des étapes des effets spéciaux d'accordéon jquery
24 Apr 2018
Cette fois, je vais vous apporter une explication détaillée des étapes des effets spéciaux d'accordéon jquery. Quelles sont les précautions à prendre pour mettre en œuvre les effets spéciaux d'accordéon jquery ?
Outils chauds Tags
Hot Tools
jQuery2019 Effets spéciaux d'animation de feux d'artifice de confession de la Saint-Valentin
Un effet spécial d'animation de feux d'artifice de confession jQuery pour la Saint-Valentin très populaire sur Douyin, adapté aux programmeurs et aux geeks techniques pour exprimer leur amour à la fille qu'ils aiment. Peu importe que vous choisissiez de l'aimer ou non, vous devez finalement être d'accord.
modèle d'interface de connexion animée réactive layui
modèle d'interface de connexion animée réactive layui
520 effets spéciaux d'animation Web de confession de la Saint-Valentin
Animation de confession jQuery pour la Saint-Valentin, animation d'arrière-plan de 520 confessions
Cool page de connexion au système
Cool page de connexion au système
Lecteur de musique à cassette HTML5-LECTEUR DE CASSETTE
Lecteur de musique à cassette HTML5-LECTEUR DE CASSETTE