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

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

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

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

后来发现要灵活巧妙的运用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. JMS学习（三）ActiveMQ Message Persistence（转）

    1,JMS规范支持两种类型的消息传递:persistent and non-persistent.ActiveMQ在支持这两种类型的传递方式时,还支持消息的恢复.中间状态的消息(message are ...

  2. 在Windows如何解决下Cocos2d-x示例代码TestCpp我找不到lib问题库文件

    遇到此问题,首先确定失踪的库文件,然后找到文件夹,库文件. 在编制Cocos2d-x在TestCpp工程,提示缺少lib文件,共同拥有下面2种可靠解决方式: 1.在Cocos2d-x的根文件夹Debu ...

  3. Spark SQL Catalyst源代码分析Optimizer

    /** Spark SQL源代码分析系列*/ 前几篇文章介绍了Spark SQL的Catalyst的核心运行流程.SqlParser,和Analyzer 以及核心类库TreeNode,本文将具体解说S ...

  4. 在Windows下搭建React Native Android开发环境

    widows版本: win7 64位 专业版 1. 安装jdk.(我用的jdk7) 注意选择x86还是x64版本, 添加到系统PATH环境变量 2. 准备好android sdk 这个不多说,同时推荐 ...

  5. 10 个迅速提升你 Git 水平的提示(转)

    最近我们推出了两个教程:熟悉Git的基本功能和 让你在开发团队中熟练的使用Git . 我们所讨论的命令足够一个开发者在Git使用方面游刃有余.在这篇文章中,我们试图探索怎样有效的管理你的时间和充分的使 ...

  6. Erlangserver紧内存优化解决方案

    提出的问题:server100万人在线,16G内存快被吃光. 玩家进程占用内存偏高 解决方法: 第一步: erlang:system_info(process_count). 查看进程数目是否正常,是 ...

  7. jquery在元素上收购事件

    jquery的给元素绑定的事件能够用data方法取出来 通过$(element).data("events")来获取 // 比方给一个button绑定两个click事件 $(&qu ...

  8. Wix学习整理（5）——安装时填写注册表

    原文:Wix学习整理(5)--安装时填写注册表 一 Microsoft操作系统的注册表 什么是注册表? 注册表是Mircrosoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信 ...

  9. [poj 1127]Jack Straws[线段相交][并查集]

    题意: 给出一系列线段,判断某两个线段是否连通. 思路: 根据线段相交情况建立并查集, 在同一并查集中则连通. (第一反应是强连通分量...实际上只要判断共存即可, 具体的方向啊是没有关系的..) 并 ...

  10. hdu3652（数位dp）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3652 题意:求1~n含有13且能被13整除的数的个数. 分析:数位dp,dp数组加一维来维护到pos位 ...