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. C#进程间通讯技术-整理。

    原文:C#进程间通讯技术-整理. 扩展阅读:http://www.cnblogs.com/joye-shen/archive/2012/06/16/2551864.html 一.进程间通讯的方式 1) ...

  2. sql中update，alter，modify，delete，drop的区别和使用（整理）（转）

    关于update和alter: 百度知道上关于update和alter有一个很形象的总结: 一个表有很多字段,一个字段里有很多数据. 一个家有很多房间,一个房间里有很多家具. update是用来将衣柜 ...

  3. JAVA在线基础教程!

    http://www.runoob.com/java/java-tutorial.html http://www.51zxw.net/list.aspx?cid=380 http://www.weix ...

  4. NOI 2013 书法家

    http://uoj.ac/problem/125 我真是日狗了...... 果然还是没有耐心读题,搞到读题读错了2个地方,结果调试了半天...... 言归正传. 动态规划. 这种题目很常见. 我们发 ...

  5. 构建一个基于 Spring 的 RESTful Web Service

    本文详细介绍了基于Spring创建一个“hello world” RESTful web service工程的步骤. 目标 构建一个service,接收如下HTTP GET请求: http://loc ...

  6. android分享到新浪微博，认证+发送微博，

    分享到新浪微博,折腾了大半个月,现在终于弄出来了,心里的那个爽呀,太痛快了,哈哈!! 废话少说,首先是认证, 1.进入新浪微博提供的开放平台http://open.weibo.com/ 注册新浪账号. ...

  7. C/C++变量命名规则

    变量命名规则是为了增强代码的可读性和easy维护性. 变量命名规则: 一.用最短字符表示最准确的意义. 二.使用变量前缀. 1.  整型前缀 int               nId;        ...

  8. php:兄弟连之面向对象版图形计算器1

    曾经看细说PHP的时候就想做这个,可是一直没什么时间,这次总算忙里偷闲搞了代码量比較多的project. 首先,文档结构,都在一个文件夹下就好了,我的就例如以下. 一開始,进入index.php文件. ...

  9. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  10. 转载： Javah生成JNI头文件出现找不到类的错误

    错误: 找不到 'com.chnic.jni.SayHellotoCPP' 的类文件. 上图可以看到错误和解决办法. 不要忘记那个点 javah -classpath . -jni com.chnic ...