css pour obtenir un effet de changement d'image-tutoriel CSS-php.cn

css pour obtenir un effet de changement d'image

墨辰丷

Libérer： 2018-05-09 17:10:50

original

8189 Les gens l'ont consulté

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>

Copier après la connexion

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!