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 CSS画图之基础篇
Jul 29 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python unittest单元测试框架总结
2018/09/08 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python设置环境变量的作用整理
2020/02/17 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python判断是空的实例分享
2020/07/06 Python
python求解汉诺塔游戏
2020/07/09 Python
python tqdm库的使用
2020/11/30 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
优秀毕业生事迹材料
2014/02/12 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
党支部换届选举方案
2014/05/08 职场文书
开工仪式策划方案
2014/05/23 职场文书
预备党员转正考核材料
2014/06/03 职场文书
社区健康教育工作方案
2014/06/03 职场文书
应收账款管理制度
2015/08/06 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android