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. mysql 查询表

    判断表是否存在 SELECT table_name FROM information_schema.TABLES WHERE table_name ='yourname'; 判断存储过程是否存在 se ...

  2. iOS 的 APP 在系统中如何适配不同的屏幕的尺寸

    iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...

  3. iOS 第三方 需要 引用的库

    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ AFNetWorking   是基于 nsurlconnection   所以不需要引入库 ＝＝＝ ...

  4. Builder模式的几个要点

    1.Builder模式主要用于“分步骤构建一个复杂的对象”.在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化.2.变化点在哪里,封装哪里——Builder模式主要在于应对“复杂对象各 ...

  5. mysql出现错误“ Every derived table must have its own alias”

    Every derived table must have its own alias 这句话的意思是说每个派生出来的表都必须有一个自己的别名 一般在多表查询时,会出现此错误. 因为,进行嵌套查询的时 ...

  6. Delphi TcxTreeListColumn 的 ImageComboBox 用法

    1.设置图片如下: 设置默认值: if Trim(FQuery.fieldByName('cPersonCategory').AsString) = '' then begin CNode.Value ...

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

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

  8. Unity性能优化

    一.优化组件访问方式 原文:http://blog.csdn.net/lijing_hi/article/details/11657887 1.缓存Component的引用,如transform 2. ...

  9. 关于<ul><ol><li>的用法

    <ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...

  10. Android Studio：You need to use a Theme.AppCompat theme (or descendant) with this activity. AlertDialog

    学习<第一行代码>的时候遇到的问题. Process: com.example.sevenun.littledemo, PID: 2085 java.lang.RuntimeExcepti ...