前端白菜一枚，第一次写js，请多指教。
没错就是右边搜索栏下面的那几个图标，单个元素很快就可以搞定，而扩展到多个的时候被困惑住了，折腾了很久。
首先是html
<a class="icon-link" style="text-decoration: none;" href="http://www.douban.com/people/ReSur/"> <img id="icon-douban" onmouseover="mouseOver('douban')" onmouseout="mouseOut('douban')" alt="ReSur's Douban" src="/images/icon/douban.png" width="32" height="32" border="0" /> </a> <a class="icon-link" style="text-decoration: none;" href="http://weibo.com/ReSur"> <img id="icon-weibo" onmouseover="mouseOver('weibo')" onmouseout="mouseOut('weibo')" alt="ReSur's Weibo" src="/images/icon/weibo.png" width="32" height="32" border="0" /> </a> <a class="icon-link" style="text-decoration: none;" href="http://twitter.com/jinjinqian"> <img id="icon-twitter" onmouseover="mouseOver('twitter')" onmouseout="mouseOut('twitter')" alt="ReSur's Twitter" src="/images/icon/twitter.png" width="32" height="32" border="0" /> </a> <a class="icon-link" style="text-decoration: none;" href="http://facebook.com/ReSur"> <img id="icon-facebook" onmouseover="mouseOver('facebook')" onmouseout="mouseOut('facebook')" alt="ReSur's Facebook" src="/images/icon/facebook.png" width="32" height="32" border="0" /> </a> <a class="icon-link" style="text-decoration: none;" href="http://github.com/ReSur"> <img id="icon-github" onmouseover="mouseOver('github')" onmouseout="mouseOut('github')" alt="ReSur's Github" src="/images/icon/github.png" width="32" height="32" border="0" /> </a> |
然后是js，这是优化前的代码：
<script type="text/javascript"> function mouseOver(website){ if (website === "douban") { document.getElementById("icon-" + website).src="/images/icon/douban_hover.png"; } else if (website === "weibo") { document.getElementById("icon-weibo").src="/images/icon/weibo_hover.png"; } else if (website === "twitter") { document.getElementById("icon-twitter").src="/images/icon/twitter_hover.png"; } else if (website === "facebook") { document.getElementById("icon-facebook").src="/images/icon/facebook_hover.png"; } else if (website === "github") { document.getElementById("icon-github").src="/images/icon/github_hover.png"; } else{} } function mouseOut(website){ if (website === "douban") { document.getElementById("icon-douban").src="/images/icon/douban.png"; } else if (website === "weibo") { document.getElementById("icon-weibo").src="/images/icon/weibo.png"; } else if (website === "twitter") { document.getElementById("icon-twitter").src="/images/icon/twitter.png"; } else if (website === "facebook") { document.getElementById("icon-facebook").src="/images/icon/facebook.png"; } else if (website === "github") { document.getElementById("icon-github").src="/images/icon/github.png"; } else{} } </script> |
写的过程中总觉得欠妥，有很多重复的地方也许可以重构一下。这是优化后的代码：
<script type="text/javascript"> function mouseOver(website){ document.getElementById("icon-" + website).src="/images/icon/" + website + "_hover.png"; } function mouseOut(website){ document.getElementById("icon-" + website).src="/images/icon/" + website + ".png"; } </script> |
下期我会给大家带来mac快捷键的使用技巧，整理了很久了的。今天是水水地过场，所以就不放每期的小技巧啦，各位晚安 : )
