JQuery控制图片由中心点逐渐放大效果
更新时间:2016年06月26日 08:40:59 作者:我爱默小兜
这篇文章主要介绍了JQuery控制图片由中心点逐渐放大效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的。如下图:
从中心点进行缩放
实现代码如下:
<meta charset="utf-8"> <style type="text/css"> #div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; padding-left:50px;} #div1 img{ position:absolute; left:0; top:0; margin: 0 auto;} </style> <div id="div1"> <img src="images/1.jpg" width="100px" height="80px"> </div> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $('#div1 img').mouseenter(function(){ var wValue=1.5 * $(this).width(); var hValue=1.5 * $(this).height(); $(this).animate({width: wValue, height: hValue, left:("-"+(0.5 * $(this).width())/2), top:("-"+(0.5 * $(this).height())/2)}, 1000); }).mouseleave(function(){ $(this).animate({width: "100", height: "80", left:"0px", top:"0px"}, 1000 ); }); }); </script>
以上所述是小编给大家介绍的JQuery控制图片由中心点逐渐放大效果的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注脚本之家网站!
相关文章
jQuery中使用了document和window哪些属性和方法小结
未列出常见的比如document.getElementById(),object.addEventListener()等。2011-09-09解析页面加载与js函数的执行 onload or ready
这篇文章主要介绍了页面加载与js函数的执行 onload or ready 需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
很多人熟悉使用锚链接跳转到的页面部分的解决方案,这种效果当需要列出很长的数据集时,是非常实用的,然而页面跳转对于游客来说有时候并不是好友好,弊端我就不多说了,祥看下本文2013-02-02
最新评论