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


Posted in Javascript onJune 26, 2016

有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的。如下图:

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

从中心点进行缩放

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

实现代码如下:

<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控制图片由中心点逐渐放大效果的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
node文件批量重命名的方法示例
Oct 23 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 #Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 #Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 #Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 #Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 #Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 #Javascript
jQuery图片渐变特效的简单实现
Jun 25 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
如何实现JS函数的重载
2006/09/22 Javascript
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
js树形控件脚本代码
2008/07/24 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android