JQuery控制图片由中心点逐渐放大效果

编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了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控制图片由中心点逐渐放大效果的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注狼蚁SEO网站!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板