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

来源：互联网发布：拖欠淘宝贷款一年编辑：程序博客网时间：2024/05/16 09:43

以前，上百度图片首页，看到分类图片的特效，百度图片首页！后来，经常看片那种图片特效，今天早起来到实验室，决定自己写一下，也学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，图片写成绝对定位也是可以的，这样一来，鼠标放上去不仅图片尺寸会变化，而且其位置也会变化，就会实现预期想要的效果！

效果预览：效果预览

0 0