清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!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> <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; 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= "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= "http://hyipaying.com/images/demo/2010/anyixuan01.jpg" alt= "" /> </a> </div> <div class = "wrap" > <a href= "#" > <img src= "http://hyipaying.com/images/demo/2010/anyixuan03.jpg" alt= "" /> </a> </div> <div class = "wrap" > <a href= "#" > <img src= "http://hyipaying.com/images/demo/2010/anyixuan05.jpg" alt= "" /> </a> </div> <div class = "wrap" > <a href= "#" > <img src= "http://hyipaying.com/images/demo/215/anyixuan04.jpg" alt= "" /> </a> </div> </div> </body> </html> . |