Question

我想这样做，当用户盘旋或点击缩略图时，它会使其成为更大的图像。我已经四处寻找答案，但似乎没有什么对我有用（我尝试过JQuery，css），这是我的代码：

＆＃13;

    body {
        padding:0;
        margin:0;
    }
    
    #active {
        background-color: #27629f;
    }
    
    #active:hover {
        background-color: #27629f;
    }
    
    .mainContainer {
        margin: 0 auto;
        padding: 0;
        width:100%;
        max-width: 860px;
        height:3000px;
        background: #27629f;
        position: relative;
    }
    
    .txtContainer {
        margin: 0 auto;
        padding: 0;
        width:99%;
        text-align: center;
    }
    
    .imgContainer {
        margin: 0 auto;
        padding: 0;
        width:800px;
        text-align: center;
    }
    
    .txtContainer p{
        font-family: "Century Gothic", "verdana", sans-serif;
        font-size: 20px;
        color:#e0ebff;
    }
    
    .txtContainer heading{
        font-family: "Century Gothic", "verdana", sans-serif;
        font-size: 26px;
        color:white;
    }
    
    .gallery {
        
    }
    
    .gallery li{
        list-style: none;
    }
    
    .gallery img{
        float:left;
        margin:5px;
        padding-left: 4px;
        border:1px solid black;
    }
    
    .galleryHeading {
        font-size: 20px;
        font-family: "Century Gothic", "verdana", sans-serif;
        color:white;
        margin:0;
        padding:0;
    }
    
    
    /*-------------------- Nav Bar Below ------------------*/
    
    .nav {
        
    }
    
    .nav ul {
        list-style: none;
        background-color: #3b6da1;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    
    .nav li {
        font-family: "Century Gothic", "verdana", sans-serif;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #2e4c6c;
    }
    .nav a {
        text-decoration: none;
        color:#fff;
        display: block;
        transition: .3s cubic-bezier(.47, .28, .36, .67);
    }
    
    .nav a:hover {
        z-index: 2;
        background-color: #034995;
    }
    
    .nav a.active {
        background-color: #fff;
        color: #444;
        cursor: default;
    }
    
    @media screen and (min-width: 700px) {
        /* This changes the settings to look better for larger monitors */
        .nav li {
            width: 175px; /* Divide the total amount of nav buttons to get this resualt this by the min width */
            border-bottom: none;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
        }
        /* Floats left so if screen is larger than 600px is wont look funny */
        .nav li {
            float:left;
        }
        /* Fixes the colord background */
        .nav ul {
            overflow: auto;
            width: 700px;
            margin: auto;
        }
        
        .nav {
            background-color: #3b6da1;/* Cover the whole of the top */
        }
        .imageMapping:hover{
            height:460px;
        }
    }

＆＃13;

    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li id="active"><a href="#">Mapping</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="mainContainer">
        <br/>
        <div class="txtContainer">
            <heading>Mapping</heading>
            <p>
                This page contains images of all my maps.
            </p>
        </div>
        <br/>
        <div class="imgContainer" >
            <div id="galleryHeading">CS:GO - Mapping</div>
            <p>
                
            </p>
            
            <br/>
            <div class="gallery">
                <img src="1.png" alt="" height="150px" width="250px;"/>
                <img src="2.png" alt="" height="150px" width="250px;"/>
                <img src="3.png" alt="" height="150px" width="250px;"/>
                <img src="OneToChange.png" alt="" height="450px" width="782px;"/>
                <img src="4.png" alt="" height="150px" width="250px;"/>
                <img src="5.png" alt="" height="150px" width="250px;"/>
                <img src="6.png" alt="" height="150px" width="250px;"/>
            </div>
        </div>
    
    </div>

＆＃13;

我想出来了！ Heres what i wanted to do.

Answer 1

我相信以下内容会让您指出正确的方向。它利用jQuery中的toggleClass方法使图像成为全尺寸。

<强> JQuery的：

$('img.sample-image').click(function() {
  $(this).toggleClass( "sample-image-large" );
});

CSS：

.sample-image
{
    width: 25%;
}

.sample-image-large
{
    width: 100% !important;
}

<强> HTML

<img src="http://captainkimo.com/wp-content/uploads/2012/06/Sunset-at-Bass-Harbor-Lighthouse-Acadia-National-Park-Maine.jpg" class="sample-image">

查看实际操作： http://jsfiddle.net/eat_sleep_code/7pknqmrw/

HTML图像库使用缩略图更改更大的图像

1 个答案: