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. 安装notepad++之后怎样在鼠标右键上加上Edit with notepad++

    在鼠标右键上加入使用notepad++编辑 我们在安装完notepad++文本编辑器之后,在一个文本文件上右键有时候并没有出现"使用notepad++编辑的选项",我们可以通过简单 ...

  2. wpf只运行一个实例

    原文:wpf只运行一个实例 在winform下,只运行一个实例只需这样就可以: 1． 首先要添加如下的namespace: using System.Threading; 2． 修改系统Main函数, ...

  3. Android 获取文件大小

    android 获取文件夹.文件的大小 以B.KB.MB.GB 为单位 FileSizeUtil public class FileSizeUtil { ;//获取文件大小单位为B的double值 ; ...

  4. Android String 转 MD5

    /** * 将字符串转成16 位MD5值 *  * @param string * @return */ public static String MD5(String string) { byte[ ...

  5. 【转】android 开发 命名规范

    原文网址:http://www.cnblogs.com/ycxyyzw/p/4103284.html 标识符命名法标识符命名法最要有四种: 1 驼峰(Camel)命名法:又称小驼峰命名法,除首单词外, ...

  6. 【转】Android ListView长按事件触发点击事件

    原文网址:http://blog.csdn.net/twlkyao/article/details/17301609 算法在实现ListView的onItemLongClickListener的时候, ...

  7. VS2013中C++创建DLL导出class类

    1.创建"Win32 Console Application"项目,命名为"ClassDllLib",并在"Application type" ...

  8. 单片微机原理P4：80C51串口与串行总线拓展

    0. 串口通讯 0. 串口通讯的数据传输方式:单工(单向传输数据),半双工(非同时双向传输),全双工(同时,双向传输) 1. 根据通信方式的不同又分为同步通讯和异步通讯. 同步通讯:所有设备都使用同一 ...

  9. php中strstr、strrchr、substr、stristr四个函数的区别总结

    php中strstr.strrchr.substr.stristr四个函数的区别总结 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-09-22我要评论 这篇文章主要介绍了php ...

  10. 使用代码自定义UIView注意一二三

    文/CoderAO(简书作者)原文链接:http://www.jianshu.com/p/68b383b129f9著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 当一撮样式一样的视图在 ...