- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
- h1{color:Green;}
- body{ background-color:#EEEEEE ; }
- .wrap{
- width:200px;
- height:200px;
- margin:0px;
- overflow:hidden;
- position:relative;
- float:left;
- }
- .wrap a img{
- border:none;
- position:absolute;
- top:-66.5px;
- left:-150px;
- height:500px;
- opacity: 0.5;
- }
- </style>
- <script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('.wrap img').hover(
- function () {
- $(this).stop().animate({
- 'opacity': '1.0',
- 'height': '200px',
- 'top': '0px',
- 'left': '0px'
- });
- },
- function () {
- $(this).stop().animate({
- 'opacity': '0.5',
- 'height': '500px',
- 'top': '-50px',
- 'left': '-150px'
- });
- }
- );
- });
- </script>
- </head>
- <body>
- <h1>jQuery图片缩小效果</h1>
- <div style="width:400px;margin:30px 0">
- <div class="wrap">
- <a href="#">
- <img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan01.jpg">http://hyipaying.com/images/demo/2010/anyixuan01.jpg" alt=""/>
- </a>
- </div>
- <div class="wrap">
- <a href="#">
- <img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan03.jpg">http://hyipaying.com/images/demo/2010/anyixuan03.jpg" alt=""/>
- </a>
- </div>
- <div class="wrap">
- <a href="#">
- <img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan05.jpg">http://hyipaying.com/images/demo/2010/anyixuan05.jpg" alt=""/>
- </a>
- </div>
- <div class="wrap">
- <a href="#">
- <img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan04.jpg">http://hyipaying.com/images/demo/2010/anyixuan04.jpg" alt=""/>
- </a>
- </div>
- </div>
- </body>
- </html>
- .
- //该片段来自于http://www.codesnippet.cn/detail/080520133210.html
来源: http://www.codesnippet.cn/detail/080520133210.html