js+jquery+html实现在三种不通的情况下，点击图片放大的效果。

　　三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定，高度不固定

第一种情况：图片的父元素宽高固定:

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Title</title>

         <style>

             body {

                 padding-bottom: 400px

             }

             #aaa {

                 width: 200px;

                 height: 200px;

                 border: 1px solid #000;

                 overflow: hidden

             }

             #aaa img {

                 width: 100%;

                 height: 100%;

                 position: relative;

                 top: 0;

                 left: 0

             }

             #aaa img:hover {

                 width: 120%;

                 height: 120%;

                 left: -10%;

                 top: -10%

             }

         </style>

     </head>

     <body>

         <h1>图片的父元素宽高固定</h1>

         <div id="aaa">

             <img src="../images/图标1.png">

         </div>

     </body>

     <html>

first

第二种情况：图片的宽高固定：

second

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Title</title>

         <style>

             #bbb {

                 position: relative;

             }

             #bbb img {

                 width: 200px;

                 height: 200px;

                 position: absolute

             }

             #bbb img:hover {

                 width: 240px;

                 height: 240px;

                 left: -20px;

                 top: -20px;

                 clip: rect(20px, 220px, 220px, 20px)/*裁剪 上右下左*/

             }

         </style>

     </head>

     <body>

         <h1>图片的宽高固定</h1>

         <div id="bbb">

             <img src="../images/图标1.png">

         </div>

     </body>

     <html>

第三种情况：图片的父元素宽固定，高度不固定

third

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Title</title>

         <style>

             #ccc {

                 position: relative;

                 top: 200px;

                 width: 15%;

                 overflow: hidden;

             }

             #ccc img {

                 width: 100%;

                 height: auto;

                 position: relative;

                 vertical-align: bottom; /*设置图片底部对齐*/

             }

         </style>

     </head>

     <body>

         <h1 style="position: relative; top:200px;">图片的父元素宽固定，高度不固定</h1>

         <div id="ccc">

             <img src="../images/图标1.png">

         </div>

         <script src="../js/jquery.min.js"></script>

         <script>

             $("#ccc img").mouseenter(function() {

                 //clientHeight动态获取对象的高度

                 var y = this.parentNode.clientHeight;

                 this.parentNode.style.height = y + "px";

                 this.style.width = "120%";

                 this.style.height = "120%";

                 this.style.top = "-10%";

                 this.style.left = "-10%";

             });

             $("#ccc img").mouseleave(function() {

                 this.parentNode.style.height = "auto";

                 this.style.width = "100%";

                 this.style.height = "auto";

                 this.style.top = "0";

                 this.style.left = "0";

             });

         </script>

     </body>

     <html>

 

js+jquery+html实现在三种不通的情况下，点击图片放大的效果的更多相关文章

  1. js jquery 获取服务器控件的三种方法

    由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID=" ...

  2. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  3. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  6. JS弹出对话框的三种方式

    JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...

  7. js字符串转换为数字的三种方法。（转换函数）（强制类型转换）（利用js变量弱类型转换）

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  8. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  9. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

随机推荐

  1. 使用NSTimer实现倒计时-备

    今天在CocoaChina上面看到有人在问倒计时怎么做,记得以前在看Iphone31天的时候做过一个,今天翻出来运行不了了,原因是我的IphoneSDK升级到3.1了,以前使用的是2.2.1,在2.2 ...

  2. E​F​I​主​板​和​G​P​T​分​区​表​安​装​系​统以及转换GPT分区表的方法

    现在硬盘越来越大,而原来的MBR分区方式,超过2T的硬盘就会识别不全,只有使用GPT的方式才可以,但是GPT如果用原来的BIOS是无法引导装系统了,不过如果你的主板支持EFI,那么可以用GPT+EFI ...

  3. LeetCode_Permutation Sequence

    The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  4. Ruby中的Symbol与字符串

    刚开始学Ruby,一下子搞不清其中的Symbol(变量需要加:)和字符串有什么区别,为这么要为语言设计这么一个东西.让我很迷惑. 首先,字符串对象,是不同的.比如"String" ...

  5. 计算机语言学习导论[C/C++]

    作者:@幻の上帝 1 前置条件语文其实挺重要,这个没问题,但容易被忽视.当然,如果不是经常要折腾文档,要求不高:但起码要能说清楚话.数学重要,主要是广度,作为快速学习相关领域知识的基础.深度上面可深可 ...

  6. CH Round #53 -密室

    描述 有N个密室,3种钥匙(红色,绿色,白色)和2种锁(红色,绿色),红色钥匙只能开红色的锁,绿色钥匙只能开绿色的锁,白色钥匙可以开红色的锁和绿 色的锁,一把钥匙使用一次之后会被扔掉.每个密室由一扇门 ...

  7. jQuery 1.6+ 中attr()与prop() 区别

    最近在写一个关于checkbox全选与取消全选的优化方法时,看到很多高手用到了.prop(). 于是在jquery的帮助文档查了一下,才知道这是在jquery 1.6.1中新加的方法,用来设置属性.但 ...

  8. cf442B Andrey and Problem

    B. Andrey and Problem time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  9. C#的隐式和显示类型转换

    原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/7494577 关于隐式转换和显示转换,每种语言都有的,C#中当然也不例外. ...

  10. FreeBSD简单配置SSH并用root远程登陆方法

    FreeBSD简单配置SSH并用root远程登陆方法 前言:最近下载了FreeBSD,在虚拟机上安装,第一步先要开启SSH服务,用终端putty软件可以实现在windows系统进行远程管理, 初级 = ...