鼠标放上去图片放大

最新推荐文章于 2024-01-27 20:29:14 发布

含笑一过

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量3.5k

点赞数 1

分类专栏：前端文章标签：图片放大

本文链接：https://blog.csdn.net/u013630488/article/details/50504949

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                                        鼠标放上去图片放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
    body{padding:0;margin:0;}
    ul{list-style: none;}
    .wap{width:900px;margin:10px auto;border: 1px solid #ccc;}
    .wap ul li{margin:8px;float: left;box-shadow: 0px 0px 5px #ccc;background: #fff;padding: 12px;transition:1s;}
    .wap ul li:hover{transform:scale(1.12);-webkit-transform:scale(1.12); z-index: 99;}
    .clearfix:after{content:".";clear: both;height:0;visibility: hidden;display:block;}
    .clearfix{*+height: 1%;}
    </style>
</head>
<body>
    <div class="wap clearfix">
        <ul>
            <li><img src="js_02.png" height="188" width="166"></li>
            <li><img src="js_03.png" height="188" width="166"></li>
            <li><img src="js_04.png" height="188" width="166"></li>
            <li><img src="js_05.png" height="188" width="166"></li>
            <li><img src="js_06.png" height="188" width="166"></li>
            <li><img src="js_07.png" height="188" width="166"></li>
            <li><img src="js_08.png" height="188" width="166"></li>
            <li><img src="js_10.png" height="188" width="166"></li>
            <li><img src="js_11.png" height="188" width="166"></li>
        </ul>
    </div>
</body>
</html>

效果图：
这里写图片描述
注释：
1.li{transition:1s;}
2.li:hover{transform:scale(1.12);-webkit-transform:scale(1.12); z-index: 99;}

含笑一过

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
鼠标放上去图片放大

鼠标放上去图片放大<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> bod
复制链接

扫一扫