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

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

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

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

后来发现要灵活巧妙的运用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. Java使用Socket传输文件遇到的问题(转)

    1.写了一个socket传输文件的程序,发现传输过去文件有问题.找了一下午终于似乎找到了原因,记录下来警示一下: 接受文件的一端,向本地写文件之前使用Thread.sleep(time)休息一下就解决 ...

  2. 访何红辉：谈谈Android源码中的设计模式

    最近Android 6.0版本的源代码开放下载,刚好分析Android源码的技术书籍<Android源码设计模式解析与实战>上市,我们邀请到它的作者何红辉,来谈谈Android源码中的设计 ...

  3. plsql导入一个目录下全部excel

    import java.io.File; import java.util.ArrayList; import jxl.Sheet; import jxl.Workbook; import com.j ...

  4. 使用RouteDebugger对MVC路由进行调试

    在Asp.Net MVC程序中,路由是MVC程序的入口,每一个Http请求都要经过路由计算,然后匹配到相应的Controller和Action.通常我们的路由都会注册在Global.asax.cs文件 ...

  5. spring原拦截器配置与新命名空间mvc:interceptors配置拦截器对照与注意事项

    原先,我们是这么配置拦截器的 <bean id="openSessionInViewInterceptor"class="org.springframework.o ...

  6. 用XAML做网页！！—导航栏

    原文:用XAML做网页!!-导航栏 这次要完成的是导航栏,这是页面中比较复杂的区域. 先在 Microsoft Expression Design 中绘制导航栏的背景图案: 导出为barback.xa ...

  7. jQuery插件实战之fullcalendar（日历插件）Demo

    jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...

  8. java基金会成立Set

    1.设置 当向集合Set中添加对象时.首先集合计算要添加对象的hashcode,依据该值得到一个位置用来存放当前的对象,当在该位置没有一个对象存在的时候,集合set觉得该对象在集合中不存在,直接添加进 ...

  9. 让ecshop显示商品销量或者月销量

    首先,ecshop的信息显示模块在. ./includes/lib_goods.php文件 在其末尾添加下面这个函数 月销量:(和总销量二选一) function ec_buysum($goods_i ...

  10. Linux渗透+SSH内网转发

    http://www.jb51.net/hack/58514.html http://blog.chinaunix.net/uid-756931-id-353243.html http://blog. ...