communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

jQuery réalise les effets d'éclaircissement et d'assombrissement de l'image lorsque la souris passe dessus it_jquery

WBOY
Libérer： 2016-05-16 16:00:20
original
1696 Les gens l'ont consulté

Ce qui suit est le code source complet : 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现鼠标经过图片变亮效果</title><base target="_blank" />
<style type="text/css">
a {color:white;}
body{background:#000;}
body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
.hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}
.hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hovertreebox li').mouseover(function (e) {
$(this).siblings().stop().fadeTo(500,0.4);
});
$('.hover'+'treebox li').mouseout(function (e) {
$(this).siblings().stop().fadeTo(500,1);
});
})
</script>
</head>

<body>
<div style="color:white">jQuery突出图片列表中鼠标经过项
<br /></div>
<div class="hovertreebox" id="hovertreelist">
<ul>
<li><img src="/images/01.jpg" width="200" height="186" /></li>
<li><img src="/images/02.jpg" width="200" height="186" /></li>
<li><img src="/images/03.jpg" width="200" height="186" /></li>
<li><img src="/images/04.jpg" width="200" height="186" /></li>
<li><img src="/images/05.jpg" width="200" height="186" /></li>
<li><img src="/images/06.jpg" width="200" height="186" /></li>
</ul>
</div>
</body>
</html>
Copier après la connexion

Adresse de démonstration : http://demo.jb51.net/js/2014/jquery-images-blba/

Téléchargement des effets spéciaux : http://www.jb51.net/jiaoben/264211.html

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Étiquettes associées：
jquery鼠标经过事件 jquery鼠标经过特效
source：php.cn
Article précédent：jquery affiche automatiquement une couche publicitaire fermable dans le coin inférieur droit_jquery Article suivant：méthode js pour afficher l'invite de zone de texte compétences text_javascript
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
Possibilité de stocker le code ASP Classic sous forme de chaîne dans la base de données MYSQL Est-il possible de stocker du code asp classic dans une base de données MySQL et de lui fa...
Depuis 2024-04-06 13:38:43
0
1
358
La gestion de la molette de la souris NumberInput ignore le filtrage des événements de phase de capture Version très courte : je suis un peu coincé et je ne comprends pas très bien pourquoi ce c...
Depuis 2024-04-05 12:21:04
0
1
1387
Web scraping : attribut href manquant – Besoin de simuler les clics de souris pour le web scraping ? Pour un projet de web scraping amusant, je souhaite collecter des données de la LNH à part...
Depuis 2024-04-04 10:32:06
0
1
3473
Afficher le menu déroulant à l'aide de l'événement de survol de la souris J'ai un menu contextuel et j'essaie d'utiliser les événements de survol de la souris pour ...
Depuis 2024-04-03 15:14:43
0
1
416
Vanilla JS setTimeout() : identifier un mauvais comportement J'ai une animation sur mon menu hamburger écrite en HTML, CSS et JavaScript vanille. Résul...
Depuis 2024-04-02 20:44:40
0
1
284
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