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

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

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

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

后来发现要灵活巧妙的运用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. 《Qt编程的艺术》——9.1 QtSql模块的结构

    QtSql是一个独立的库,如果需要的话,它可以加载附加的插件.不同于QtCore和QtGui,它的内容默认情况下并没有整合进生成的project中.要使用这个库,我们要编辑 .pro文件,添加下列条目 ...

  2. hdu 2451 Simple Addition Expression（数位DP ）成败在于细节

    亚洲区域赛的题,简单的数位DP题,注重细节. 任何细节都有可能导致wa,所以没有绝对的水题. 把握好细节,此题便A. #include<stdio.h> __int64 getans(__ ...

  3. http://www.shengshiyouxi.com

    android从Linux系统启动有4个步骤:   (1) init进程启动   (2) Native服务启动   (3) System Server,Android服务启动   (4) Home启动 ...

  4. poj3280（区间dp）

    题目连接:http://poj.org/problem?id=3280 题意:给定一个长度为m(m<=2000)的小写字母字符串,在给定组成该字符串的n(n<=26)个字符的添加和删除费用 ...

  5. Vagrant - 百度百科

    http://wapbaike.baidu.com/view/9201587.htm?ssid=0&from=844b&uid=3151E6C0905477A13653132D762B ...

  6. CCLuaObjcBridge调Objective-C方法传索引数组报invalid key to &#39;next&#39;错调试

    CCLuaObjcBridge是cocos2d-x系列引擎与Objective-C进行交互的"桥梁",老廖的quick-cocos2d-x在其framework进行了简单了封装,封 ...

  7. pig中使用的一些实例语法

    在pig中, dump和store会分别完毕两个MR, 不会一起进行 1:载入名用正則表達式: LOAD '/user/wizad/data/wizad/raw/2014-0{6,7-0,7-1,7- ...

  8. 用VS2005编译生成Lua库文件和解释器

    TMD,本来很简单的东西,网上说的乱七八糟,说的也不明白,大家抄来抄去,估计都不自己实践的..花了半个下午研究了一下,总结一下. 1)下载lua工程文件,地址为http://www.lua.org/f ...

  9. VC++ 在两个文件互相包含时会出现的错误

    首先,要分别在两个文件中实现以下两个类 class Object { public: NewType ToType(); }; class NewType : public Object { } -- ...

  10. 理解Git的工作流程（转）

    英文原文:Understanding the Git Workflow 如果你不理解Git的设计动机,那你就会处处碰壁.知道足够多的命令和参数后,你就会强行让Git按你想的来工作,而不是按Git自己的 ...