之前在网上看到这样的效果，但我没有收藏夹网址，后来被我不知道如何来实现这种效果。

如今，互联网已收集有关专门。真是功夫不负有心人，被我发现。

我也努力过自己尝试着写：

但仅仅是单纯的图片放大。并且还影响了图片周围的元素的布局(由于图片放大占领了更大的空间)。

后来发现要灵活巧妙的运用overflow和position这两个属性，就能达到目的。事实上我认为CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合，当然还是js(jquery)是老大。

废话说了这么多，大家肯定还是非常疑惑：这究竟是什么特效呢？唉，我的语言表达能力还是非常一般，以下我就截图来说明好了：

这个是网页打开的初始模样：

当把鼠标停留在以上6张图片的随意一张图片的时候，会出现我所说的特效(这里我把鼠标放在第3张作为演示样例)：

你会发现图片是缩小了。鼠标放开图片感觉又放大了(回到初始状态),而没有图片溢出的现象，并且不影响其它图片和元素的布局。

以下贴代码了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery照片伸缩效果</title>

</head>

<!-- The Style -->

<style type="text/css">

*{

	margin: 0;

	padding: 0;

}

body{

	font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;

	font-size: 12px;

	color: #fff;

}

#col {

	width: 600px;

	height:400px;

	margin: 20px auto 0px auto;

    border: 1px solid #2D353F;

}

.pic {

    width: 200px;

    height: 200px;

    margin: 0px;

    overflow: hidden;/*这边定义了overflow为hidden*/

    position: relative;/*这边定义了position为relative，这事实上是为了以下的img的position能够按照pic定位*/

    float: left;

}

/*图片的原始大小是500*333左右*/

/*这里并没有对width宽度做文章，是对height高度做文章的*/

.pic a img  {

	height: 500px;

    border: none;

    position: absolute; /*正由于父标签定义了position。这边img定义position才有定位根据，要不然就是对于整个浏览器进行定位*/

    top: -66.5px;

    left: -150px;

    opacity: 0.5;

    -moz-opacity: 0.5;

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);/*这边为了兼容浏览器。和opacity属性的作用是一样的*/

}

</style>

<!-- The JavaScript -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

    $(function() {

        $('#col img').hover(

            function(){

                var $this = $(this);

                $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});

            },

            function(){

                var $this = $(this);

                $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});

            }

        );

    });

</script>

<body>

     <div id="col">

        <div class="pic">

            <a href="#">

                <img src="Images/1.jpg"/>

             </a>

        </div>

        <div class="pic">

            <a href="#">

                <img src="Images/2.jpg"/>

            </a>

        </div>

        <div class="pic">

            <a href="#">

                <img src="Images/3.jpg"/>

            </a>

        </div>

        <div class="pic">

            <a href="#">

                <img src="Images/4.jpg"/>

            </a>

        </div>

        <div class="pic">

            <a href="#">

                <img src="Images/5.jpg"/>

            </a>

        </div>

        <div class="pic">

            <a href="#">

                <img src="Images/6.jpg"/>

            </a>

        </div>

    </div>

</body>

</html>

版权声明：本文博客原创文章，博客，未经同意，不得转载。

jQuery照片伸缩效应，这不是一个简单的图像缩放，它不影响其它元素的布局的更多相关文章

  1. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

  2. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  3. 用nodejs搭建一个简单的服务监听程序

    作为一个从业三年左右的,并且从事过半年左右PHP开发工作的前端,对于后台,尤其是对以js语言进行开发的nodejs,那是比较有兴趣的,虽然本身并没有接触过相关的工作,只是自己私下做的一下小实验,但是还 ...

  4. 用C#自定义一个简单的集合

    闲来无聊来自己做了一个简单的'集合',用来加深自己对集合的理解 class listNode { private object value; public listNode(object _value ...

  5. 20 个具有惊艳效果的 jQuery 图像缩放插件

    jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...

  6. 一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile

    我本想安静的做一个美男子,可是,老板不涨工资,反而,一月不如一月. 我为什么放弃jquery mobile插件选择自己写特效? 在开发中大家都知道效率很重要,一个好的工具可以在开发中大大提升效率,工作 ...

  7. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  8. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  9. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

随机推荐

  1. [转]解决get方法传递URL参数中文乱码问题

    来自:http://www.javaeye.com/topic/483158 应用一:解决tomcat下中文乱码问题(先来个简单的) 在tomcat下,我们通常这样来解决中文乱码问题: 过滤器代码: ...

  2. hdu4513(manacher)

    传送门:吉哥系列故事——完美队形II 题意:求最长回文队伍且队伍由中间向两边递减. 分析:manach算法小应用,在判断回文子串向两边递减时加点限制使回文是由中间向两边递减的. #pragma com ...

  3. hdu1505（dp求最大子矩阵）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1505 分析: 这题是HDU 1506 的加强版,定义一个二维数组,d[i][j]表示第i行j列元素在前 ...

  4. php获取分类以下的全部子类方法

    获取分类以下的全部子类方法: static function getMenuTree($arrCat, $parent_id = 0, $level = 0,$all=True) { static $ ...

  5. WebKit爬虫

    https://github.com/emyller/webkitcrawler 一个开源的项目,可以快速入门. http://spiderformysql.com/ http://crawl.gro ...

  6. VS2010升级VS2013后，出现没有定义类型“PowerPacks.ShapeContainer”错误解决方法

    开发说明: http://msdn.microsoft.com/zh-tw/library/microsoft.visualbasic.powerpacks.aspx Microsoft.Visual ...

  7. HDu 2830 Matrix Swapping II（dp）

    Problem Description Given an N * M matrix with each entry equal to 0 or 1. We can find some rectangl ...

  8. JAVA邮件收发实现(待)

    http://blog.csdn.net/ycg01/article/details/1394465

  9. js面向对象编程：命名空间

    在其它语言中为了避免类和方法重名问题,都有一个类似命名空间的概念,在js中实现类似的功能吗? 能够实现,主要是借助于js中对象的概念来实现,比如:  1 在命名空间中定义方法属性 var GiantC ...

  10. Codeforces #252 (Div. 2) B. Valera and Fruits

    题目倒是不难,可是读起来非常恶心 依据题目的描写叙述不easy找到适合存储的方法 后来我就想不跟着出题人的思路走 我自己开一个数组c 令c[a[i]] = b[i] 则c[i] == [j] 代表第i ...