Rumah  >  Artikel  >  hujung hadapan web  >  jQuery简易图片放大特效示例代码_jquery

jQuery简易图片放大特效示例代码_jquery

WBOY
WBOYasal
2016-05-16 16:45:251540semak imbas

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

jQuery简易图片放大特效示例代码_jquery




Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn