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 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
微信小程序聊天功能的示例代码
Jan 13 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
九年级历史教学反思
2014/01/27 职场文书
七年级生物教学反思
2014/01/30 职场文书
毕业实习评语
2014/02/10 职场文书
集体婚礼策划方案
2014/02/22 职场文书
库房管理员岗位职责
2014/03/09 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
淘宝店策划方案
2014/06/07 职场文书
主题团日活动总结
2014/06/25 职场文书
小学生植树节活动总结
2014/07/04 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
企业工会工作总结2015
2015/05/13 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书