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. android 反编译操作

    1:首先将apk程序解压: 2:将classes.dex反编译为jar包:$ ./dex2jar/dex2jar.sh classes.dex 将生成一个新的文件classes_dex2jar.jar ...

  2. MYSQL错误解决：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' ( ...

  3. Codeforces 161D Distance in Tree

    题目大意:给出一棵n个节点的树,统计树中长度为k的路径的条数(1<=n<=50000 , 1<=k<=500) 思路:树分治! #include<cstdio> # ...

  4. Codeforces 56D Changing a String

    http://codeforces.com/contest/56/problem/D 题目大意: 一个字符串变为目标字符串,可以执行插入,置换和删除3种操作,求最少操作数. 思路:dp[i][j]代表 ...

  5. LeetCode_Scramble String

    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...

  6. BAT线下战争：巨额投资或培养出自己最大对手（包括美团、58、饿了么在内的公司都在计划推出自己的支付工具和金融产品，腾讯只做2不做O）

    BAT线下战争:巨额投资或培养出自己最大对手 2015年10月12日09:49   <财经>杂志    我有话说(18人参与) 收藏本文        BAT大举投资线下公司,看似咄咄逼人 ...

  7. 在docker以FPM-PHP运行php，慢日志导致的BUG分析

    问题描述: 最近将IOS书城容器化,切换流量后.正常的业务测试了一般,都没发现问题.线上的错误监控系统也没有报警,以为迁移工作又告一段落了,暗暗的松了一口气.紧接着,报警邮件来了,查看发现是一个苹果支 ...

  8. 在eclipse中创建web项目

    如何创建dynamic web project项目 本文的演示是从本地文件创建dynamic web project,从svn检出的同时创建dynamic web project于此类似.我们推荐使用 ...

  9. sql server Convert 的函数的用法 转换成浮点数

    SELECT a.ijjdid ,b.ICYDID 订单ID,b.CCYDH 订单编号,b.CWYDH 委印单号,b.CYJMC 印件名称,b.CYJLX 印件类型,b.CYWDWMC 客户名称,b. ...

  10. 黑马程序员_Java面向对象2_继承

    4.面向对象_继承 4.1继承的概述 提高了代码的复用性. 让类与类之间产生了关系,有了这个关系,才有多态的特性. 注意:千万不要为了获取其他类的功能而去继承,简化代码而继承.必须是类与类之间有所属关 ...