菜单图片切换js

最新推荐文章于 2022-02-14 15:33:24 发布
最新推荐文章于 2022-02-14 15:33:24 发布
阅读量218 收藏
点赞数
文章标签： XHTML HTML
前段时间同事和我讨论一个菜单图片切换的问题 我看了下js控制图片的切换 在这里贴出来总结一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>aa</title>
<script language="javascript" type="text/javascript">
var img1="url(images/menu_bg1.gif)";
var img2="url(images/menu_bg2.gif)";
var img3="url(images/img_mainmenu_bk_yellow.gif)";
function changeImg(obj){
if(checkColr(obj)){
if(obj.style.backgroundImage==img2){
obj.style.backgroundImage=img1;
}else{
obj.style.backgroundImage=img2;
}
}
}
function changeImg2(obj){
check(obj);
obj.style.backgroundImage=img3;
}
function checkColr(obj){
if(obj.style.backgroundImage!=img3){
return true;
}else{
return false;
}
}
function check(obj){
var len=document.getElementById("tr").getElementsByTagName('li').length;
for(i=1;i<=len;i++){
var tdi="td"+i;
var objold=document.getElementById(tdi);
if(objold.style.backgroundImage==img3&&objold!=obj){
objold.style.backgroundImage=img1;
}
}
}
</script>
<style>
.mm{
width:249px;
height:30px;
float:left;
}
.mm ul{
width:249px;
height:30px;
margin:0;
padding:0;
}
.mm ul li{
list-style:none;
width:83px;
height:30px;
float:left;
text-align:center;
line-height:30px;
cursor:pointer;
background:url(images/menu_bg1.gif);
}
</style>
</head>
<body>
<div class="mm">
<ul id="tr">
<li id="td1" οnmοuseοver="changeImg(this)" οnmοuseοut="changeImg(this)" οnclick="changeImg2(this)">个人风彩</li>
<li id="td2" οnmοuseοver="changeImg(this)" οnmοuseοut="changeImg(this)" οnclick="changeImg2(this)">集体风彩</li>
<li id="td3" οnmοuseοver="changeImg(this)" οnmοuseοut="changeImg(this)" οnclick="changeImg2(this)">世界风彩</li>
</ul>
</div>
</body>
</html>

如代码所示 通过鼠标的移动触发切换图片 在点击图标改变图片时先遍历是否已有被点击的按钮 这个遍历我觉得不太妥当 但也想不出好的办法
a542939658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序写菜单切换 以及点击菜单的图片切换
qq_39201210的博客
06-05 6697
1.需求：    点击左边的科室选择，出现对应的科室二级菜单。并且图片样式切换为当前点击状态。2.问题： 小程序的背景图需要用在线图片，所以我这里用的是&lt;image&gt;不是背景图。因此图片的状态切换不能用hover以下为js Page({ data: { keshi:[ {imgUrl:"../../images/leftbar_body.png",keshina...
使用js实现二级菜单栏切换
chili_fan的博客
06-23 5878
js实现二级菜单栏切换 一、一级菜单栏和二级菜单在同一个盒子内。 当鼠标经过水果盒子时，让下面的内容显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
JS封装方法实现菜单栏切换
zuo_zuo_blog的博客
04-07 1788
HTMl部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="tools.js"></script> <style&g...
原生js实现可切换式导航栏
Iguodala的博客
06-08 8366
前些日子看到个这样的效果： 于是就想实现一下，思路是通过js实现多个div的是否显示，也就是display:none;来控制内容的切换，我的效果如下： 由于切换的是div，所以里面的内容不会影响整体功能。下面上代码。 html： <!DOCTYPE html> <html> <head> <title>新浪式点击切换导航&l...
JS用户中心tab标签切换菜单
10-15
java web用户中心tab标签切换菜单
漂亮的切换菜单很实用的菜单
01-12
很漂亮的切换菜单，很节省空间的切换菜单，很实用的切换菜单
javascript实现tab菜单切换
sx1989827的专栏
01-17 7525
    最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.以下是tab菜单的html结构:vhcdsdfd..........................tab1,tab2就是内容,blank是填充剩下的.body是tab标签对应的内容.以下是javascript代码:sx.activex.tabmenu={ create:func
用js实现导航菜单点击切换选中时高亮状态
yangyun_1999的专栏
07-10 5769
.menu { padding:0; margin:0; list-style-type:none;} .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; } .menu li a { display:block; width:80px; text-align:center; height:32px;
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
javafx可视化界面的切换和菜单栏
qq_43201403的博客
01-05 1万+
大三了，只学会了java编写代码的皮毛，很后悔自己没有在大一大二好好学习，新年刚过，给自己定下目标：好好利用每一天！ 最近老师布置了很多课程设计，跟同学每天泡图书馆学到头秃，不过很欣慰学到了javafx代码编写的小技巧。 一. 可视化界面之间的切换 首先程序执行会生成一个界面，然后你点击一个按钮转换到另外的界面 这个问题困扰了我很长时间，我搜索了很多资料，差不多都是wndows（）方法来实现的。...
vue2.0导航菜单切换
热门推荐
香蕉你个芭呐呐的博客
04-26 1万+
css *{ margin:0; padding: 0; } ul li{ list-style: none; } .navul{ margin:100px auto 20px; overflow: hidden; } .navul li{ background-color: #5597b4; padding...
JS——图片切换
老丑的博客
01-26 415
图片切换                 /*样式*/         body{background: url("bg.jpg");background-size: cover ;  display: block}         .img img{margin: 100px 300px 0px 300px;}         .img ul li{float: left;lis
代码-JS之导航栏切换
羊驼可以吃吗的博客
10-19 1545
效果： &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot;
简单实现Tab菜单的切换功能
weixin_46267824的博客
02-14 2251
做毕设时有点击菜单/导航栏项目然后切换页面内容的需求，记录一下这个小功能 主要思路 页面准备三个盒子：导航栏/菜单、内容盒子、展示盒子 建立导航标签/按钮到内容的映射字典，获取点击元素的class属性，在字典中查找对应的内容class属性，然后在展示盒子中显示该内容即可 html代码 <body> <!-- 导航菜单 --> <div class="nav"> <ul> <li cl
js 导航图标切换_小程序实现滚动渐变的自定义导航条
weixin_34731498的博客
12-25 218
背景由于项目需要，需要在我们的详情页做一个详情页的滚动渐进增强的自定义导航条。接下来就简单记录下开发时的实现思路，以及自己实现中的问题，方便以后查阅。前期准备由于微信的限制，我们要实现单一页面的自定义导航条需要对这个页面进行配置才允许自定义。如果是所有页面都要自定义导航条，那就需要在 app.json 中全局配置了。具体配置如下："navigationStyle": "custom", 实现思路首...
CSS day12 移动端布局练习
qq_34620296的博客
09-13 730
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
JS控制下拉菜单框，动态改变图片
anjichan4261的博客
11-30 581
<select id="s1" onchange='document.getElementById("pic").src=this.value'> <option value="http://bbs.blueidea.com/images/smilies/default/biggrin.gif">biggrin</option> <optio...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值