JS鼠标悬浮切换图片示例
2014-11-12 19:58
369 查看
1、头部JS
function hnShowNewsPic(num){
for(i=1;i<7;i++){
document.getElementById("hn_news_pic"+i).src = "images/normal.gif";
}
document.getElementById("hn_news_pic"+num).src = "images/active.gif";
}
2、页面HTML:
<div class="hn_news">
<ul>
<li><img id="hn_news_pic1" src="images/active.gif" onmousemove="hnShowNewsPic(1);" /></li>
<li><img id="hn_news_pic2" src="images/normal.gif" onmousemove="hnShowNewsPic(2);"/></li>
<li><img id="hn_news_pic3" src="images/normal.gif" onmousemove="hnShowNewsPic(3);"/></li>
<li><img id="hn_news_pic4" src="images/normal.gif" onmousemove="hnShowNewsPic(4);"/></li>
<li><img id="hn_news_pic5" src="images/normal.gif" onmousemove="hnShowNewsPic(5);"/></li>
<li><img id="hn_news_pic6" src="images/normal.gif" onmousemove="hnShowNewsPic(6);"/></li>
</ul>
</div>
3、切换背景图片时的写法:
//错误写法
document.getElementById("hnTab"+num).style.backgroundImage = "images/hn_tab_hover.jpg";
//正确写法
document.getElementById("hnTab"+num).style.background = "url('images/hn_tab_hover.jpg')";
或:document.getElementById("hnTab"+num).style.backgroundImage = "url(images/hn_tab_hover.jpg)";
function hnShowNewsPic(num){
for(i=1;i<7;i++){
document.getElementById("hn_news_pic"+i).src = "images/normal.gif";
}
document.getElementById("hn_news_pic"+num).src = "images/active.gif";
}
2、页面HTML:
<div class="hn_news">
<ul>
<li><img id="hn_news_pic1" src="images/active.gif" onmousemove="hnShowNewsPic(1);" /></li>
<li><img id="hn_news_pic2" src="images/normal.gif" onmousemove="hnShowNewsPic(2);"/></li>
<li><img id="hn_news_pic3" src="images/normal.gif" onmousemove="hnShowNewsPic(3);"/></li>
<li><img id="hn_news_pic4" src="images/normal.gif" onmousemove="hnShowNewsPic(4);"/></li>
<li><img id="hn_news_pic5" src="images/normal.gif" onmousemove="hnShowNewsPic(5);"/></li>
<li><img id="hn_news_pic6" src="images/normal.gif" onmousemove="hnShowNewsPic(6);"/></li>
</ul>
</div>
3、切换背景图片时的写法:
//错误写法
document.getElementById("hnTab"+num).style.backgroundImage = "images/hn_tab_hover.jpg";
//正确写法
document.getElementById("hnTab"+num).style.background = "url('images/hn_tab_hover.jpg')";
或:document.getElementById("hnTab"+num).style.backgroundImage = "url(images/hn_tab_hover.jpg)";
相关文章推荐
- 原创JS图片放大效果(二) — 多图点击切换,鼠标移上放大
- 查看商品图片,鼠标悬浮图片放大js实现
- js实现鼠标悬浮给图片加边框的方法
- js和jquery 两种写法 鼠标经过图片切换背景效果
- js鼠标点击图片切换效果代码分享
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 原创JS图片放大效果(二) — 多图点击切换,鼠标移上放大 代码很美,步履不停
- 纯CSS实现鼠标移动切换图片示例
- js实现鼠标悬浮给图片加边框的方法
- 【js练习一】鼠标经过切换图片和图片描述
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
- JS鼠标滑过图片时切换图片
- js实现使用鼠标拖拽切换图片的方法
- jQuery图片切换插件jquery.cycle.js使用示例
- web前端实验一:利用Js捕获鼠标事件实现图片切换
- JS鼠标滑过图片时切换图片实现思路
- Ferris教程学习笔记:js示例2.16 鼠标移过,改变图片路径
- js鼠标点击图片切换效果代码分享
- js实现使用鼠标拖拽切换图片的方法
- 一个简单且丑陋的js切换背景图片基础示例