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滚动新闻实现代码
网上下载了一个Jquery新闻滚动Demo，效果不错。我根据自己情况，做了些调整。下载后，除了Html及Jquery.js,还有三个文件，分别是Css,主Js和一个定位Js（jqu
jQuery实现查找链接文字替换属性的方法
本文实例讲述了jQuery实现查找链接文字替换属性的方法，分享给大家供大家参考，具体如下：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/
jQuery实现每隔几条元素增加1条线的方法
本文实例讲述了jQuery实现每隔几条元素增加1条线的方法。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：!DOCTYPEhtmlPUBLIC"-//W3C//D