js鼠标点击图片切换效果实现代码_javascript技巧

来源：尚佳旅游分享网

本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

html代码：


 
 
 迈瑞宝
 
 
报价：11.99-23.69万
 车身结构：三箱
 油耗：8.3-12.0L
 
 
 
 索纳塔8
 
 
报价：13.39-22.59万
 车身结构：三箱
 油耗：9.0-12.0L
 
 
 
 K5
 
 
报价：10.88-25.58万
 车身结构：三箱
 油耗：8.4-13.0L

css代码：

ul.menu > li > a{
 float:left;
 width:265px;
 height:50px;
 margin-top:450px;
 text-align:center;
 line-height:50px;
 color:#ddd;
 background-color:#333;
 letter-spacing:1px;
 cursor:pointer;
 text-decoration:none;
 text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
 list-style:none;
 float:left;
 margin-top:-180px;
 width:100%;
 height:110px;
 padding-top:20px;
 background-repeat:no-repeat;
 background-color:transparent;
}
ul.menu > li ul li{
 display:none;
}
 ul.menu > li ul.sub1 {
 background-image: url('../img/bg1sub.png');
 }
 ul.menu > li ul.sub2 {
 background-image: url('../img/bg2sub.png');
 }
ul.menu > li ul.sub3{
 background-image:url(../img/bg3sub.png);
}
ul.menu > li ul li a{
 color:#fff;
 text-decoration:none;
 line-height:30px;
 margin-left:20px;
 text-shadow:1px 1px 1px #444;
 font-size:11px;
}
ul.menu > li ul li a:hover{
 border-bottom:1px dotted #fff;
}
ul.menu > li ul.sub1 li{
 display:block;
}

js代码：