缩小jquery图片缩小效果

jQuery图片缩小效果

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://w ww.w 3.org/T R/xhtml 1/DT D/xhtml 1-trans itiona l.dtdhtml xmln s=http://www.w 3.org/1999/xhtmlheadmeta http-equiv=Content-Type c ontent=text/html;c hars et=UTF-8/title jQuery图片缩小效果-jQuery学习/titlelink href=http://hyipaying.c om/cs s/Stylesheet_min.c ss rel=stylesheet type=text/c ss /style type=text/cs sh 1{c olor:Green;}body{bac kground-c olor:#EE EE EE; }

.wrap{w idth: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;opac ity:0.5;

/s tylescript type=text/javascript src=http://ajax.googleap is.com/ajax/libs/jquery/1.4.2/jquery.min.js/scriptscript type=text/javascript

$(doc ument).ready(func tion() {

$(‘.wrap img’).hover(func tion() {

$(this).s top().animate({

‘opac ity’ : ‘1.0’ ,

‘height’ : ‘200px’ ,

‘top’ : ‘0px’ ,

‘left’ : ‘0px’func tion() {

$(this).s top().animate({

‘opac ity’ : ‘0.5’ ,

‘height’ : ‘500px’ ,

‘top’ : ‘-50px’ ,

‘left’ : ‘-150px’

/script

/headbody

h 1 jQuery图片缩小效果/h 1div>