鼠标悬浮图片放大特效

最新推荐文章于 2023-12-01 12:58:10 发布

蓝色清晨_

最新推荐文章于 2023-12-01 12:58:10 发布

阅读量3.6k

点赞数

分类专栏： Jquery 笔记

本文链接：https://blog.csdn.net/yingleiming/article/details/80652892

版权

Jquery 笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬浮图片放大特效</title>
    <link rel="stylesheet" type="text/css" href="../../style/reset.css">
    <link rel="stylesheet" type="text/css" href="../../style/font-awesome.min.css">
    <script type="text/javascript" src="../../scripts/jquery-3.2.1.min.js"></script>
    <style type="text/css"> 
        #gallery{
            width: 1600px;
            margin: 100px auto;
        }
        #gallery>ul>li{
            width: 380px;
            height: 230px;
            float: left;
            margin: 0 10px;
            /*父元素相对定位*/
            position: relative;
        }
        #gallery>ul>li>a>img{
            width: 380px;
            height: 230px;
            z-index: 1;
            /*子元素绝对定位*/
            position: absolute;
        }
        #gallery>ul>li>a>img:hover{
            /*堆叠层级高于之前*/
            z-index: 2;
        }
        h1{
            clear:both;
        }
    </style>
</head>
<body>


<!--实现鼠标悬浮图片放大特效-->
<div id="gallery">
    <ul>
        <li>
            <a href="../../images/bvdk.jpg" class="tooltip" title="办公场景一">
                <img src="../../images/bvdk.jpg"/>
            </a>
        </li>
        <li>
            <a href="../../images/bxbt.jpg" class="tooltip" title="办公场景二">
                <img src="../../images/bxbt.jpg"/>
            </a>
        </li>
        <li>
            <a href="../../images/bxctr.jpg" class="tooltip" title="办公场景三">
                <img src="../../images/bxctr.jpg"/>
            </a>
        </li>
        <li>
            <a href="../../images/bxetc.jpg" class="tooltip" title="办公场景四">
                <img src="../../images/bxetc.jpg"/>
            </a>
        </li>
    </ul>       
</div>

<script type="text/javascript">
    /*注意 坑
        2018-6-11
        1.不宜使用 mouseover()和mouseout()方法
        2.stop()方法阻止了动画叠加行为
        3.z-index千万别写在动画里面，堆叠顺序一定要写正确
        4.margin值的计算方法为(430-380)/2和(280-230)/2
        5.要正确使用position定位
    */
    $(function(){
        $("#gallery>ul>li>a>img").mouseenter(function(){
            $(this).stop().animate({"width":"430px","height":"280px","margin":"-25px"},200);
        }).mouseleave(function(){
            $(this).stop().animate({"width":"380px","height":"230px","margin":"0"});
        });
    });
</script>

</body>
</html>

蓝色清晨_

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮图片放大特效

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标悬浮图片放大特效&lt;/title&gt; &lt;link rel="stylesheet" type="
复制链接

扫一扫

专栏目录