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

前端之家收集整理的这篇文章主要介绍了js鼠标点击图片切换效果实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

具体代码如下:

HTML代码

css代码

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代码

以上就是js鼠标点击图片切换效果实现的主要代码,希望对大家动手实现鼠标点击图片切换效果

猜你在找的JavaScript相关文章