Question

如何将图像更改为其他图像并在用户点击下方时缩放图像我有一些图片来显示我希望效果如何

http://i.stack.imgur.com/u8mHg.gif

白色html：

<p class="img-main">
<a href="/eshop/items/152MANH-KNM01S/152MANH-KNM01S-NY.jpg"     class="overlaybox-img" rel="NAVY">
<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T- 1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">

    <li class="defaultColor selected">
                    <div class="inner">
                        <div class="description">BLACK</div>
                        <div class="rgbColor" data-color="000000"   style="background-color: #000000"></div>
                    </div>
                </li>
                <li>
                    <div class="inner">
                        <div class="description">WHITE</div>
                        <div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
                    </div>
                </li>

    <div class="altImages">

  <ul class="alternativeImages">     
   <li class="selected">

        </li>
        <li>
            <img alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
        </li>
  </ul>
                </div>          

                </ul>
  </div>

黑色html;

<p class="img-main">
<a href="/eshop/items/152MANH-KNM01S/152MANH-KNM01S-NY.jpg"    class="overlaybox-img" rel="NAVY">
<img src="http://s16.postimg.org/6y1xy2f91/HM10_T_1004_BK_1.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">

    <li class="defaultColor selected">
                    <div class="inner">
                        <div class="description">BLACK</div>
                        <div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
                    </div>
                </li>
                <li>
                    <div class="inner">
                        <div class="description">WHITE</div>
                        <div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
                    </div>
                </li>

    <div class="altImages">

    <ul class="alternativeImages">     
    <li class="selected">

        </li>
        <li>
            <img  alt="http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg" width="54"  height="54" >
        </li>
   </ul>
                </div>          

                </ul>
    </div>

的CSS：

body{
background-color: #000;

 }
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}

.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}

Answer 1

Zoom.js是一个用于放大图片的精彩javascript库。

示例：

<link href="css/zoom.css" rel="stylesheet">
<script src="js/zoom.js"></script>
<script src="https://raw.githubusercontent.com/twbs/bootstrap/master/js/transition.js"></script>

<img src="http://s9.postimg.org/4xhwklc33/zoom.gif" data-action="zoom">

祝你好运，这有助于！

注意：我知道github不是一个好的CDN，但它需要这个脚本！

缩放图像和图像更改

1 个答案: