使用Javascript更改图像大小(复制)

时间:2013-05-13 13:06:49

标签: javascript css css3 css-transitions

好的,所以我一直在看这个超过一个星期,但无法理解。基本上这里是我之前发布的最终结果的一个例子:

Previous Stack Overflow Post

他们的建议不起作用。当您单击右上角的按钮时,javascript正在更改标题css。这是一个演示:DEMO of JAVASCRIPT CHANGE

我正在尝试使用图像复制此操作,但我不知道javascript那么好,并且我不太确定当我查看javascript文件时我正在阅读的内容。我要么有人帮我读这个javascript所以我可以自己编辑或帮我找到解决方案。

以下是Javascript:Script.JS

以下是我到目前为止所做的相关HTML:

body >
<div id="gspinner" class="spinner"></div>
<div id="glob">
<header>
    <div class="inner">


    <a href="#!/home"><h5><img src="images/logo_large.png" /></h5></a>
            <!--<a href="#!/home"><img src="logo-large.png" id="img-             logo" alt="" /></a>
            <!--<a  href="#!/home"></></a>-->

        <nav>
            <ul>

                <li class="li-2"><a href="#!/about"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
                    <ul>
                        <li><a href="#!/history">History</a></li>
                        <li><a href="#!/mission">Mission Statement</a></li>
                        <li><a href="#!/solutions">Solutions</a></li>
                        <li><a href="#!/distribution">Distribution Area</a></li>
                        <li><a href="#!/logo">SAS Logo</a></li>
                    </ul>
                </li>
                <li class="li-1"><a href="#!/events"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
                <ul>
                        <li><a href="#!/tradeshow">Trade Show</a></li>
                        <li><a href="#!/awesomeachievers">Awesome Achievers</a></li>
                        <li><a href="#!/whatshappening">What's Happening</a></li>
                    </ul></li>
                <li class="li-3"><a href="#!/technology"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
                <ul>
                        <li><a href="#!/nexgen">NexGen</a></li>
                        <li><a href="#!/synergy">Synergy</a></li>
                        <li><a href="#!/edi">EDI</a></li>
                    </ul>
                </li>
                <li class="li-4"><a href="#!/marketing"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
                <li class="li-5"><a href="#!/sales"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
                <li class="li-6"><a href="#!/mail"><span class="lbl">Employment</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
            </ul>
        </nav>
    </div>
</header>

这是CSS:Style.css

任何帮助都会非常感激,并且会获得“积分”,我已经在这方面工作了一个多星期没有任何帮助,但我已经决定我应该寻求帮助。

谢谢!

1 个答案:

答案 0 :(得分:1)

不是Javascript解决方案,但我设法使用CSS实现了您想要的功能;只需将“高度:40%”添加到徽标图像中,它就应该与标题一起缩放(请注意,您可能需要使用更高质量版本的徽标),因为当前的徽标会变得有点像素化