模仿百度图片首页图片分类特效

最新推荐文章于 2022-01-09 22:38:10 发布

AlloyTeam-Zy

最新推荐文章于 2022-01-09 22:38:10 发布

阅读量827

点赞数

分类专栏：我写的一些web前端小特效文章标签： web前端图片百度百度图片特效图片特效

本文链接：https://blog.csdn.net/ZYGG5521/article/details/47314755

版权

我写的一些web前端小特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以前，上百度图片首页，看到分类图片的特效，百度图片首页！后来，经常看片那种图片特效，今天早起来到实验室，决定自己写一下，也学web前端一年多了，这个应该没问题吧！好了，废话不多说，来看我的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AlloyTeanm-zy</title>
    <script src="jquery-1.11.1.js"></script>
    <style type="text/css">
        body{

            font-family: simhei;
        }

       #div1{

            overflow:hidden;
            background-color: pink;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -89px;
            margin-top:-84px ;
        }
        #pic{

            position: relative;
        }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){

                $("#pic").hover(function() {

                    $("#pic").animate({width:'230px',height:'200px',top:'-10px',left:'-10px'},"1000");

                },function(){

                    $("#pic").animate({width:'100%',height:'100%',top:'0px',left:'0px'},"1000");

                })
            })
            </script>
</head>
<body>
<div style="width: 192px;height: 168px; " id="div1">
     <img src="05.jpg" id="pic">
 </div>
</body>
</html>

其实就是么简单，把图片放在一个固定大小的DIV里，我的图片（192*168），鼠标放上去使图片尺寸变大，然后让图片超出DIV的部分不显示（overflow:hidden）,就是这种效果，结果发现，图片并不是像想象中的那样从中间散开，而是向右，向下扩大尺寸，一点也不好看，最后想了一下，只要让它的top值和left值变为负的，图片就会向上向左移，而且将图片的定位写成相对定位，我代码中的写法，因为外面有个div，图片写成绝对定位也是可以的，这样一来，鼠标放上去不仅图片尺寸会变化，而且其位置也会变化，就会实现预期想要的效果！

效果预览：效果预览