文档介绍：该【JQuery控制图片由中心点逐渐放大效果 】是由【泰山小桥流水】上传分享，文档一共【3】页，该文档可以免费在线阅读，需要了解更多关于【JQuery控制图片由中心点逐渐放大效果 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。JQuery控制图片由中心点逐渐放大效果有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的。如下图:从中心点进行缩放实现代码如下:[html]viewplaincopy<metacharset="utf-8"><styletype="text/css">#div1{width:600px;height:400px;margin:50pxauto;position:relative;text-align:center;padding-left:50px;}#div1img{position:absolute;left:0;top:0;margin:0auto;}</style><divid="div1"><imgsrc="images/"width="100px"height="80px"></div><scripttype="text/javascript"src="js/jquery-"></script><scripttype="text/javascript">$(function(){$('#div1img').mouseenter(function(){varwValue=*$(this).width();varhValue=*$(this).height();$(this).animate({width:wValue, height:hValue,left:("-"+(*$(this).width())/2),top:("-"+(*$(this).height())/2)},1000);}).mouseleave(function(){$(this).animate({width:"100",height:"80",left:"0px",top:"0px"},1000); }); });/******************************2016 年</script>6月26补充*******************************************************************/2016年6月26补充今天发现,上面的动画,其实还是有一个小问题的。就是当我多次在相应的元素上移入和移除的时候,就会执行多次mouseenter、mouseleave,当然有人会想,这样会有什么问题呢?那么就看下图也就是当我的鼠标移出来了,还在反复执行mouseenter、mouseleave。为什么会这样呢?因为JS事件队列中有多个等待执行的动画,关于事件队列,我觉得回头有必要好好总结一下。修改方案jQuery提供了stop方法,停止所有在指定元素上正在运行的动画,如下图修改后效果下图最终 JS部分代码如下[javascript]viewplaincopy<scripttype="text/javascript">$(function(){ $('#div1img').mouseenter(function(){ varwValue=*$(this).width(); varhValue=*$(this).height();$(this).stop().animate({width:wValue,height:hValue,left:("-"+(*$(this).width())/2),top:("-"+(*$(this).height())/2)},1000);}).mouseleave(function(){$(this).stop().animate({width:"100",height:"80",left:"0px",top:"0px"},1000); }); }); </script>