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控制图片由中心点逐渐放大效果的相关知识，希望对大家有所帮助，如果大家想了解更多内容敬请关注小牛知识库网站！
-
类似于微信的头像点击放大显示效果。 [Code4App.com]
-
用十分简单的方法实现：点击图片，图片缓慢放大的效果。 [Code4App.com]
-
本文向大家介绍jQuery实现文章图片弹出放大效果，包括了jQuery实现文章图片弹出放大效果的使用技巧和注意事项，需要的朋友参考一下 首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递到插件内部，如下： 那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。 整体代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同
-
本文向大家介绍js放大镜放大购物图片效果，包括了js放大镜放大购物图片效果的使用技巧和注意事项，需要的朋友参考一下 图片放大镜效果，供大家参考，具体内容如下 一难点：不让黄盒子出界 二难点：让大盒子相应移动（比例） 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现图片渐入渐出切换展示效果，包括了jQuery实现图片渐入渐出切换展示效果的使用技巧和注意事项，需要的朋友参考一下 在这之前我们先看看我们要做的效果是什么样的： 我们要图片在过“一定时间”后自动切换，在右下角处有小方块似数字1,2,3,4，这些数字是根据图片的个数自动出现的，当鼠标经过的时候数字颜色有一定的变化； 下面我们来看看具体怎么实现。 第一步：先写简单的html
-
本文向大家介绍jQuery制作图片旋转效果，包括了jQuery制作图片旋转效果的使用技巧和注意事项，需要的朋友参考一下 以前用JQuery写过一个纵深方向上的图片旋转效果，在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的： 其实现原理并不复杂，在数学上只用到了其中的正弦函数，制作过程大致如下： （1）先定义好图片旋转的半径 （2）图片旋转的过程需要用到setInterval()方法，来获取每
-
本文向大家介绍jQuery图片特效插件Revealing实现拉伸放大，包括了jQuery图片特效插件Revealing实现拉伸放大的使用技巧和注意事项，需要的朋友参考一下 点击图片，图片拉伸放大显示，效果非常棒！ 使用方法： 1、head区域引用文件 jquery.js，photorevealer.js，datouwang.css 2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束
-
展示效果只有两三帧有变化，问题是什么呢？