Maison > Article > interface Web > css pour obtenir un effet de changement d'image
css pour obtenir un effet de changement d'image
- 墨辰丷original
- 2018-05-09 17:10:508068parcourir
Cet article présente principalement l'effet de l'utilisation du CSS pour changer d'image. Il ne nécessite pas de CSS et le code est relativement simplifié. Il est recommandé de faire attention à la compatibilité de plusieurs navigateurs.
Le code est le suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css图切换 练习 教程来自snwebsite</title>
<style type="text/css">
a{
display:block;
border:1px solid #cccccc;
width:20px;
height:20px;
margin:1px;
}
dl{
position:absolute;
width:240px;
height:170px;
}
dt{
position:absolute;
right:1px;
top:25px;
}
dd{
width:240px;
height:170px;
overflow:hidden;
}
</style>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body>
<dl>
<dt><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></dt>
<dd>
<img src="http://files.jb51.net/upload/20080926074249449.jpg" id="a" />
<img src="http://files.jb51.net/upload/20080926074251309.jpg" id="b" />
<img src="http://files.jb51.net/upload/20080926074251902.jpg" id="c" />
</dd>
</dl>
</body>
</html>Recommandations associées :
jquery crée une image miniature associée Fonction de commutation
molette de la souris jquery pour réaliser le changement d'image
Utilisez JS pour implémenter le changement d'image de page de liaison de la molette de la souris
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!