`

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

 
阅读更多
http://www.oschina.net/code/snippet_2332599_55359
例子见附件。
就是自适应显示图片的效果 

<!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>
分享到：
| Shiro security限制登录尝试次数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    鼠标移动到div上显示制定信息或者div（自适应显示位置）

    因此，无论屏幕大小如何变化，信息div总能正确显示。 通过以上步骤，我们已经成功创建了一个简单的鼠标悬停提示信息功能。这个功能既简单又实用，可以广泛应用于各种网页项目中，提升用户体验。你可以根据自己的...

    css+div自适应窗口宽度

    总的来说，CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助，可以创建出适应不同屏幕尺寸的响应式网页，确保在各种设备上提供良好的用户体验...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等）

    本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...

    div宽度自适应布局(左边自适应)

    在网页设计中，"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术，它主要应用于响应式设计，使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...

    div+css模板布局 右侧固定，左侧自适应

    本知识点主要围绕"div+css模板布局 右侧固定，左侧自适应"这一主题展开。 在这样的布局模式中，右侧通常设置为一个固定宽度的区域，无论浏览器窗口大小如何变化，其宽度始终保持不变，常见于侧边栏、导航菜单等元素...

    Jquery图片自适应大小并居中

    ### Jquery 图片自适应大小并居中 在前端开发中，经常遇到的一个问题是当页面中的图片尺寸不统一，特别是当...通过上述步骤，我们可以有效地实现图片的自适应大小和居中显示，从而提高页面的整体视觉效果和用户体验。

    div宽度自适应布局(右边自适应)

    在本场景中，`div`被用作构建布局的基本单元，可以分别定义左侧固定宽度的区域和右侧自适应宽度的区域。 2. **宽度设置**: 在CSS中，我们可以使用`width`属性来设置元素的宽度。对于自适应布局，右侧的`div`通常不...

    VS 2012 ReportViewer 自适应大小

    ReportViewer 的自适应大小问题是由于其高度和宽度固定的原因，而 DIV 的高度和宽度可以根据浏览器的尺寸进行调整。因此，我们可以使用 DIV 来包住 ReportViewer 控件，并使用 JavaScript 代码来调整 DIV 的尺寸，...

    关于div自适应高度/左右高度自适应一致的js代码

    通过上述两种方法的结合使用，我们就可以解决在网页布局中常见的左右两侧DIV自适应高度以及DIV高度自适应屏幕的布局问题。这不仅有助于保持页面布局的整洁和一致性，而且能够提升网页在不同设备和屏幕尺寸上的适应性...

    浮动的div自适应居中显示的js代码

    总结一下，实现浮动`div`自适应居中显示的关键步骤包括： 1. 获取外层容器的宽度。 2. 计算`div`应距离左侧的距离，使其居中。 3. 使用`css()`方法更新`div`的`left`属性。 4. 添加窗口大小改变的监听事件，确保...

    div背景全屏自适应

    在网页设计与开发过程中，经常需要将某个`div`元素的背景设置为全屏显示，并且能够根据不同的屏幕尺寸进行自适应调整。这种技术被称为“div背景全屏自适应”。通过合理地设置CSS样式，可以使背景图像无论在何种...

    利用onresize使得div可以随着屏幕大小而自适应的代码

    标题提到的"利用onresize使得div可以随着屏幕大小而自适应的代码"是解决了一个特定问题：如何在浏览器窗口尺寸调整时，保持div元素的相对定位正确显示。在描述中提到了两种定位方法，一种是像素绝对定位，另一种是...

    懒人原生固定侧栏宽度自适应全屏页面布局

    我们经常能看到一些网站的后台管理系统，左侧竖导航往往都是一个固定的大小，右侧是一个自适应的div，无论你的浏览器多宽，右侧部分使用可以撑满剩下部分。记得09年之前，很多都是用一个大的table来实现，其实不然...

    根据浏览器屏幕大小高度自适应

    当用户改变浏览器窗口大小时，`onresize`事件会被触发，进而更新div元素的`height`，使其等于`clientHeight`，实现高度自适应的效果。 总的来说，实现浏览器屏幕大小高度自适应的关键在于理解并灵活运用`height`、`...

    全屏自适应轮播

    7. **性能优化**：为了提高加载速度和减少内存消耗，可以采用懒加载技术，即只加载当前显示的图片，当用户滚动到即将显示的图片时再加载。此外，利用CSS3硬件加速和正确的内存管理也是优化轮播性能的重要手段。 8. ...

    三栏布局--左右宽度固定，中间自适应宽度

    ### 三栏布局——左右宽度固定，中间自适应宽度 在网页设计中，三栏布局是一种常见的布局方式，尤其适用于需要展示多部分信息且结构清晰的页面。这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容...

    纯js实现div内图片自适应大小(已测试，兼容火狐)

    在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们需要让图片能够根据其容器（如div）的大小自动调整。本文将详细介绍如何使用纯JavaScript实现...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    在本篇内容中，介绍了如何使用纯CSS技术实现div元素在网页中的...通过上述知识点的介绍，我们可以了解到纯CSS实现div自适应居中布局的基本原理和方法，并且理解到在实际开发中需要考虑的兼容性问题和响应式设计要求。

    左固定右边自适应框架

    这种布局模式通常由两部分组成：左侧栏固定宽度，常用于导航、侧边栏等功能，而右侧栏则根据浏览器窗口大小自适应调整宽度，展示主要内容。 描述中的“真心漂亮，而且样式极其简单好改”意味着这种布局不仅视觉效果...

Magicbox
Global site tag (gtag.js) - Google Analytics