Question

我试过到处搜索，因为我在javascript中没有线索我真的不知道我在做什么。

这是我目前正在建设的网站。

我面临的问题是我希望能够点击名称扭曲，并将其更改为另一张图片：

twistnamehigh.png

然后当我点击另一张图片时，

例如，mello，我希望twistnamehigh.png更改回twistname.png然后melloname.png更改为mellonamehigh.png。

这是我想要处理的代码......

<div id="artnavigation">

    <ul class="changeme">
    <img src="images/twistname.png" id="twist"  width="190px" height="49px" alt="MelloD" /></a>



    <img src="images/ashconname.png" id="ashcon" width="190px" height="49px" alt="MelloD" />


    <img src="images/melloname.png" id="mello" width="190px" height="49px" alt="MelloD" />
    </ul>

    </div>

这是我的javascript，我使用了一种方法，我在这里找到了更改页面内容的方法。

$('.changeme img').on("click", function(e) {
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');

  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
});//@ sourceURL=pen.js

这是整个代码

    <div class="contentBox" id="home">
        <div class="blogContainer">

        <div id="artnavigation">

        <ul class="changeme">
        <img src="images/twistname.png" id="twist"  width="190px" height="49px" alt="MelloD" /></a>



        <img src="images/ashconname.png" id="ashcon" width="190px" height="49px" alt="MelloD" />


        <img src="images/melloname.png" id="mello" width="190px" height="49px" alt="MelloD" />
        </ul>

        </div>

        <div class="twistinfobox">


        <div class="about-twist">
            <div id="arrowtwist"></div>
            <div id="twistlogo">
            <div id="twistpicture"></div>
            </div>
        </div>

        <div class="about-ashcon hide">
            <div id="arrowashcon"></div>
            <div id="ashlogo"></div>
            <div id="ashpicture"></div>
        </div>

        <div class="about-mello hide">
            <div id="arrowmello"></div>
            <div id="mellologo"></div>
            <div id="mellopicture"></div>
        </div>

        <div id="twistboxtext">
            <div class="about-twist">


            <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
            eu vehicula vulputate, felis eros sagittis arcu, ut elementum lectus arcu ac orci. Fusce placerat malesuada turpis, sit amet posuer
            e orci cursus a. Phasellus eget bibendum mauris, at aliquet mauris. Nam nisi orci, mattis nec ligula vitae, scelerisque suscipit massa.
            Curabitur vestibulum neque id ur
            na tempus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                </br></br>
            Curabitur consequat ligula odio, et malesuada mi rutrum a. Nulla eget porttitor nibh. Cras vulputate eros orci, sit amet bibendum dui
            vulputate at. Duis et placerat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
            a odio dolor. Aenean vel iaculis massa. Curabitur in augue eget lacus placerat fermentum gravida euismod velit. Nulla varius ligula eu
            blandit venenatis. Donec a suscipit tellus. In dictum dolor lacinia, tincidunt orci quis, molestie nisl. Vestibulum auctor laoreet erat.
            Suspendisse ac metus ac elit vulputate pharetra.


            </p>
            </div>

            <div class="about-ashcon hide">


            <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
            eu vehicula vulputate, felis eros sagittis arcu, ut elementum lectus arcu ac orci. Fusce placerat malesuada turpis, sit amet posuer
            e orci cursus a. Phasellus eget bibendum mauris, at aliquet mauris. Nam nisi orci, mattis nec ligula vitae, scelerisque suscipit massa.
            Curabitur vestibulum neque id ur
            na tempus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                </br></br>

            </p>
            </div>

            <div class="about-mello hide">


            <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
            eu vehicula vulputate, felis eros 


            </p>
            </div>

        </div>


    </div>


<script>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src='js/jquery.min.js'></script>
<script src='js/artist.js'></script>



        </div><!-- blogContainer End-->
    </div> <!-- contentBox End-->

Answer 1

您可以使用单个图像标签来加载和预加载要切换的两个图像的盒子模型属性。

示例：

<img src="myimage" />

img {
height:50px;
width:100px;
padding:0;
background:url(myswitchimage);
}
img:hover {
height:0;
width:0;
padding:25px 50px ;/* img tag has still 50pxX100px size and you see its background only */
}

DEMO by hovering 的想法可能会产生一些转换效果。

如果您向tabindex标记添加img属性，则可以捕获该点击，您可以使用它来切换其background的图片。

<img src="myimage" tabindex="0"/>

如果支持pointer-events，则第二次点击也可以切换回来，否则请点击图片外。

img {
height:50px;
width:100px;
padding:0;
background:url(myswitchimage);
}
img:focus {
height:0;
width:0;
padding:25px 50px ;/* img tag has still 50pxX100px size and you see its background only */
pointer-events:none;/* once it has focus, if you try clicking on it it again, it looses it */
}

DEMO 2 by clicking

单击另一个图像时更改图像，然后单击另一个图像时图像将重置

1 个答案: