固定大小的div 自适应显示图片

最新推荐文章于 2021-08-04 00:31:15 发布

不净之心

最新推荐文章于 2021-08-04 00:31:15 发布

阅读量907

点赞数

分类专栏：前台&美工文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/pyzheng/article/details/84776705

版权

前台&美工专栏收录该内容

118 篇文章 1 订阅

订阅专栏

[url]http://www.oschina.net/code/snippet_2332599_55359[/url]
例子见附件。
就是自适应显示图片的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery图片平铺效果制作网页背景图片平铺代码</title>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            body {
                font-family: Consolas, arial, "宋体";
            }

            h2 {
                font-size: 20px;
                text-align: center;
                height: 32px;
                margin: 30px 0 0 0;
            }

            .pic {
                width: 920px;
                margin: 0 auto;
                zoom: 1;
            }

            .pic:after {
                content: '';
                display: table;
                clear: both;
            }

            .pic li {
                float: left;
                width: 200px;
                height: 200px;
                margin: 20px 10px 0;
                display: inline;
            }

            .default {
                border: 5px solid #d9534f;
            }

            .default img {
                width: 200px;
                height: 200px;
                vertical-align: top;
            }
        </style>

        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/jqPicAuto.js"></script>
        <script type="text/javascript">
            $(function() {
                $('.a img').jqPicAutoY({
                    width: 200,
                    height: 200,
                    zoom: 2,
                    after: function(imgObj) {
                        imgObj.css('opacity', 0).animate({
                            opacity: 1
                        }, 1000);
                    }
                });
                $('.b img').jqPicAutoX({
                    width: 200,
                    height: 200,
                    zoom: 2,
                    after: function(imgObj) {
                        imgObj.css('opacity', 0).animate({
                            opacity: 1
                        }, 1000);
                    }
                });
                $('.c img').jqPicAutoR({
                    width: 200,
                    height: 200,
                    zoom: 2,
                    after: function(imgObj) {
                        imgObj.css('opacity', 0).animate({
                            opacity: 1
                        }, 1000);
                    }
                });
                $('.d img').jqPicAutoZ({
                    width: 200,
                    height: 200,
                    zoom: 2,
                    after: function(imgObj) {
                        imgObj.css('opacity', 0).animate({
                            opacity: 1
                        }, 1000);
                    }
                });
            });
        </script>

    </head>

    <body>

        <h2>默认效果：图片对比下</h2>
        <ul class="pic">
            <li class="default">
                <a href="#"><img src="images/1.jpg"></a>
            </li>
            <li class="default">
                <a href="#"><img src="images/2.jpg"></a>
            </li>
            <li class="default">
                <a href="#"><img src="images/3.jpg"></a>
            </li>
            <li class="default">
                <a href="#"><img src="images/4.jpg"></a>
            </li>
        </ul>

        <h2>使用效果：圆形 放大</h2>
        <ul class="pic">
            <li class="a">
                <a href="#"><img src="images/1.jpg"></a>
            </li>
            <li class="a">
                <a href="#"><img src="images/2.jpg"></a>
            </li>
            <li class="a">
                <a href="#"><img src="images/3.jpg"></a>
            </li>
            <li class="a">
                <a href="#"><img src="images/4.jpg"></a>
            </li>
        </ul>

        <h2>默认效果：圆形 不放大</h2>
        <ul class="pic">
            <li class="b">
                <a href="#"><img src="images/1.jpg"></a>
            </li>
            <li class="b">
                <a href="#"><img src="images/2.jpg"></a>
            </li>
            <li class="b">
                <a href="#"><img src="images/3.jpg"></a>
            </li>
            <li class="b">
                <a href="#"><img src="images/4.jpg"></a>
            </li>
        </ul>

        <h2>使用效果：矩形 放大</h2>
        <ul class="pic">
            <li class="c">
                <a href="#"><img src="images/1.jpg"></a>
            </li>
            <li class="c">
                <a href="#"><img src="images/2.jpg"></a>
            </li>
            <li class="c">
                <a href="#"><img src="images/3.jpg"></a>
            </li>
            <li class="c">
                <a href="#"><img src="images/4.jpg"></a>
            </li>
        </ul>

        <h2>使用效果：矩形 不放大</h2>
        <ul class="pic">
            <li class="d">
                <a href="#"><img src="images/1.jpg"></a>
            </li>
            <li class="d">
                <a href="#"><img src="images/2.jpg"></a>
            </li>
            <li class="d">
                <a href="#"><img src="images/3.jpg"></a>
            </li>
            <li class="d">
                <a href="#"><img src="images/4.jpg"></a>
            </li>
        </ul>
    </body>

</html>