首页  >  文章  >  web前端  >  jQuery简易图片放大特效示例代码_jquery

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

WBOY
WBOY原创
2016-05-16 16:45:251510浏览

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




声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn