HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 移动互联网 查看内容

js+jquery+html实现三种不同图片放大效果

2016-9-12 19:19| 发布者: Hyukoh| 查看: 1194| 评论: 0|原作者: caozong|来自: tuicool

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

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


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

<!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>

原文链接:http://www.cnblogs.com/caozong/p/5854338.html?utm_source=tuicool&utm_medium=referral
来源作者:caozong
本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!投稿: admin@html5cn.org
更多

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-29 17:51

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部