首頁  >  文章  >  web前端  >  jQuery簡易圖片放大特效範例程式碼_jquery

jQuery簡易圖片放大特效範例程式碼_jquery

WBOY
WBOY原創
2016-05-16 16:45:251539瀏覽

DEMO點擊圓形圖片,圖片方法,將水的圖片放置與下層,滑鼠移上去的時候,圖片高與寬同比增大,並且圖片向左上移動

代碼

複製代碼 代碼如下:





無標題文件

<script> <BR>$(document).ready(function(e) { <BR>$( ".water1").mouseover(function(){ <BR>$("#img1").stop(true,true).animate({top:"-32.5px",left:"-32.5px", width :"400px",height:"400px"},"slow"); <BR>$("#img2").stop(true,true).animate({top:"-10px",left:"-10px ", width:"115px",height:"115px"},"slow"); <BR>$("#img3").stop(true,true).animate({top:"-4px",left: "-4px", width:"41px",height:"41px"},"slow"); <BR>}) <BR>$(".water1").mouseout(function(){ <BR>$( "#img1").stop(true,true).animate({top:"0px",left:"0px",width:"335px",height:"335px"},"slow"); <BR>$ ("#img2").stop(true,true).animate({top:"0px",left:"0px", width:"95px",height:"95px"},"slow"); <BR> $("#img3").stop(true,true).animate({top:"0px",left:"0px", width:"33px",height:"33px"},"slow"); <BR>}) <BR>}); <BR></script>

jQuery簡易圖片放大特效範例程式碼_jquery

jQuery簡易圖片放大特效範例程式碼_jquery



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn