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

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

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

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

后来发现要灵活巧妙的运用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. Net 通常用于dll 第三方插件

    log4net.dll ----记录日志 本人用能够 pangu.dll ----分词工具 用于高级搜索  拆分字词 能够非常好用 fastreport --------高速制作报表工具 本人仅仅做过 ...

  2. 解决NGINX的WORDPRESS伪静态规则失效的问题

    解决NGINX的WORDPRESS伪静态规则失效的问题 前两天搬到了EMSVPS的PR线路上,用上了最新的WDCP2.0管理面板,支持多用户管理(我们几个合租的VPS,最需要这个功能了),感觉很不错, ...

  3. 开发腾讯移动游戏平台SDK Android版Ane扩展 总结

    本文记录了在开发 腾讯移动游戏平台SDK(MSDK) Android版Ane扩展 过程中所遇到的问题和相关解决方式 问题一:编译报错:Unable to resolve target 'android ...

  4. Unix Domain Socket 域套接字实现

    主要注意流程: STREAM SOCKET: Server :  socket() --->  bind() ---> listen()  ---> accept() Client: ...

  5. 跟着ZHONGHuan学习设计模式--桥接模式

    转载请注明出处! ! !http://blog.csdn.net/zhonghuan1992 全部配套代码均在github上:https://github.com/ZHONGHuanGit/Desig ...

  6. dell N5010

    Inspiron N5010Microsoft Windows 10 企业版 (64位) (英特尔)Intel(R) Core(TM) i3 CPU       M 370  @ 2.40GHz(24 ...

  7. PHP草根论之设计模式-訪问者模式

    关于模式本身的概念,请參考网上其他文章 此处仅仅讨论在PHP实际开发过程中的应用 此模式适用范围极为受限,适用情景: 1.适用于项目维护过程,不适用于项目开发过程 2.新增需求,要求为一个/多个类添加 ...

  8. 解决backgroud:transparent在低版本浏览器中的bug

    今天在html页面上定义了一个button和一个div,大小相同,button使用绝对定位,覆盖在div上面一层,同时样式设置背景透明(background:transparent). 这样就可以在看 ...

  9. java日历程序版本

    //MainFrame.java package com.huowolf.myCalender; import java.awt.BorderLayout; import java.awt.Color ...

  10. [欧拉回路] hdu 3018 Ant Trip

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3018 Ant Trip Time Limit: 2000/1000 MS (Java/Others) ...