javascript

js实现类似hover的鼠标悬停更换背景效果

Posted by ReSur

前端白菜一枚，第一次写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快捷键的使用技巧，整理了很久了的。今天是水水地过场，所以就不放每期的小技巧啦，各位晚安 : )