Chinaunix首页 | 论坛 | 博客
  • 博客访问: 4157499
  • 博文数量: 601
  • 博客积分: 15410
  • 博客等级: 上将
  • 技术积分: 6884
  • 用 户 组: 普通用户
  • 注册时间: 2007-05-16 08:11
个人简介

独学而无友,则孤陋而寡闻!

文章分类

全部博文(601)

文章存档

2020年(1)

2018年(4)

2017年(7)

2016年(42)

2015年(25)

2014年(15)

2013年(36)

2012年(46)

2011年(117)

2010年(148)

2009年(82)

2008年(37)

2007年(41)

分类: jQuery

2016-07-09 11:27:54

直接上代码:

  1. $(".img-hover").hover(
  2.    function(){
  3.           $(this).parent().width( $(this).parent().width());
  4.           $(this).parent().height( $(this).parent().height());
  5.           $(this).parent().css({ 'padding':"-10px" });
  6.   },
  7.    function(){
  8.           $(this).parent().removeAttr("style");
  9.   });
说明:
1、.img-hover为图片的类;
2、parent类必须设置一个padding,至少10px以上才有效果。
3、原理是:先定死上级div的高度和宽度,然后再放大图片。

示例html代码:

  1. <div class="panel-heading">
  2.       <img class="img-responsive img-portfolio img-hover" src="/front/img/p1.jpg" alt="">
  3. </div>


阅读(2179) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~