文档章节

JS鼠标悬停经过图片由中心点逐渐放大效果

ZYallers
 ZYallers
发布于 2017/07/20 12:53
字数 197
阅读 30
收藏 0

JS鼠标悬停经过图片由中心点逐渐放大效果

原理很简单,就是调用jq的动画方法,鼠标经过时候,图片宽高放大,然后左右位置向外扩展。

//鼠标经过中心缩放图片效果
$.checkImgLoadCompete = function(img, callback) {
var timer = setInterval(function() {
  if (img.complete) {
    clearInterval(timer);
    callback.call(img);
  }
}, 50);
};
$.fn.hoverZoomPic = function(){
$(this).each(function(){
  $.checkImgLoadCompete(this, function(){
    //console.log($(this).width(), $(this).height());
    $(this).data('origin-width', $(this).width()).data('origin-height', $(this).height());
    $(this).hover(function(){
     var w = parseInt( $(this).data('origin-width') ), h = parseInt( $(this).data('origin-height') );
     var w2 = w + w * 0.02, h2 = h + h * 0.02;
     var space = w * 0.02 / 2;
     $(this).stop().animate({height: h2, width: w2, left: -space, right: space}, 500);
    },function(){
     var w = parseInt( $(this).data('origin-width') ), h = parseInt( $(this).data('origin-height') );
     $(this).stop().animate({height: h, width: w, left:'0', right:'0'}, 400);
  });
});
});
};

参考资料

© 著作权归作者所有

上一篇: vim常用技巧
ZYallers
粉丝 1
博文 59
码字总数 19100
作品 0
佛山
程序员
私信 提问
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1
好玩儿 的 javascript

非常平滑的JS图片滚动特效代码,无缝循环 http://www.codefans.net/jscss/code/255.shtml 强烈推荐的一款CSS导航菜单 http://www.codefans.net/jscss/code/768.shtml 纯CSS下拉菜单代码http:...

曦羽
2017/10/05
0
0
JS 做的tab选项卡 在一次点击之后CSS hover 就失灵了

用js做了一个简单的tab选项卡,一共8个DIV,4个卡,4个内容,然后用JS点击事件判断,点哪个哪个的tab卡变换图片,然后对应内容div显示,其他则隐藏,同时要实现一个类似导航的滑动效果,起初...

sea__blue
2011/06/14
1K
8
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
基于Html+js实现的瓦片式的Webgis栅格地图管理平台

基于Html+js实现的Webgis栅格平台 成都领君科技提供的基于HTML5+js开发的瓦片式地图发布平台,适用于几乎所有浏览器(IE6+,遨游,火狐,搜狗,谷歌,360,世界之窗,Opera等)。功能模块包括如...

成都领君科技
2012/04/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

佳博标签打印问题-

由于网页打印不行,要么sdk 写成activex,这样浏览器支持又有局限。 因此,采用客户端编写打印服务启动,定时轮询服务端打印队列,从服务的获取打印队列进行打印。 服务端web 点击打印,讲打...

mellen
17分钟前
1
0
Jmeter利用JMXMon插件监控服务器JVM情况

1、Jmeter下载JMXMon插件 2、Jmeter 添加 JMXMon请求 远程监控JVM状态需要在JVM启动时候加上一段参数才行,在tomcat bin目录下找到catalina.sh 在# OS specific support. $var _must_ be set...

覃光林
19分钟前
2
0
Qt编写安防视频监控系统(界面很漂亮)

一、前言 视频监控系统在整个安防领域,已经做到了烂大街的程序,全国起码几百家公司做过类似的系统,当然这一方面的需求量也是非常旺盛的,各种定制化的需求越来越多,尤其是这几年借着人脸...

飞扬青云
23分钟前
3
0
Python的requests库中的Put方式使用

1.后端接口 @PutMapping public ResponseEntity<MyObject> putMyObject( @RequestBody MyObject myObject) { ... } Put请求参数在请求体里面。 1.前端请求 import requestsimpo......

亚林瓜子
24分钟前
1
0
全站加速(DCDN)- IP应用加速产品解读

5月22日下午15点,阿里云全站加速(DCDN)-IP应用加速如期发布。IP应用加速是阿里云自主研发的一款更高效、更安全、更便捷的动态加速产品,结合阿里云CDN本身的资源优势,利用就近接入、智能...

迷你芊宝宝
28分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部