- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
http://www.kmnk01.com/hxpfk/2015/jq_1124/96.html - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>jQuery图片缩小效果-jQuery学习</title>
- <link href="http://hyipaying.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css" />
- <style type="text/css">
- h1{color:Green;}
- body{ background-color:#EEEEEE ; }
- .wrap{
- width:200px;
- height:200px;
http://www.kmnk01.com/hxpfk/2015/jq_1124/97.html - margin:0px;
- overflow:hidden;
- position:relative;
- float:left;
- }
- .wrap a img{
- border:none;
- position:absolute;
http://www.kmnk01.com/hxpfk/2015/jc_1124/98.html - top:-66.5px;
- left:-150px;
- height:500px;
- opacity: 0.5;
- }
- </style>
- <script type="text/javascript" src="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 () {
http://www.kmnk01.com/hxpfk/2015/jc_1124/98.html - $(this).stop().animate({
- 'opacity': '1.0',
- 'height': '200px',
- 'top': '0px',
- 'left': '0px'
- });
- },
- function () {
- $(this).stop().animate({
http://www.kmnk01.com/hxpfk/2015/jq_1124/100.html - 'opacity': '0.5',
- 'height': '500px',
- 'top': '-50px',
- 'left': '-150px'
- });
- }
- );
- });
http://www.kmnk01.com/hxpfk/2015/hzj_1124/99.html - </script>
- </head>
- <body>
- <h1>jQuery图片缩小效果</h1>
- <div style="width:400px;margin:30px 0">
- <div class="wrap">
- <a href="#">
- <img src="data/attachment/forum/2015pic1/anyixuan01.jpg" alt=""/>
- </a>
- </div>
- <div class="wrap">
- <a href="#">
- <img src="data/attachment/forum/2015pic1/anyixuan03.jpg" alt=""/>
- </a>
- </div>
- <div class="wrap">
- <a href="#">
http://www.kmnk01.com/hxpfk/2015/bt_1123/92.html - <img src="data/attachment/forum/2015pic1/anyixuan05.jpg" alt=""/>
- </a>
- </div>
- <div class="wrap">
- <a href="#">
http://www.kmnk01.com/hxpfk/2015/py_1124/103.html - <img src="data/attachment/forum/2015pic1/anyixuan04.jpg" alt=""/>
- </a>
- </div>
- </div>
http://www.kmnk01.com/hxpfk/2015/jq_1124/102.html - </body>
- </html>
- .
[JavaScript/JQuery] jQuery图片缩小效果
最新推荐文章于 2023-04-16 00:03:12 发布