javascript实现鼠标放上后下边对应内容变换的效果


Posted in Javascript onAugust 06, 2015

本文实例讲述了javascript实现鼠标放上后下边对应内容变换的效果。分享给大家供大家参考。具体如下:

这是个网上比较常见的菜单效果,鼠标放上后相应的内容会切换,图文布局方式。技术方面,是JS和CSS相配合来实现,代码中的JS部分,你可以单独摘取出来保存成一个JS文件,然后引入到页面中,这样使主页面代码简洁些。本效果在ie、火狐等浏览器下测试正常。

运行效果如下图所示:

javascript实现鼠标放上后下边对应内容变换的效果

具体代码如下:

<html>
<head>
<title>鼠标放上后下面的内容切换</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menuA{background:#333;float:left;padding-top:2px;width:100%;}
.menuA li{float:left;}
.menuA li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menuA .check a {background:#fff;color:#000;}
.menuB{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.menuB ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
<div class="menuA">
<ul>
   <li class="check"><a href="#">国际时事</a></li>
   <li><a href="#">精美壁纸</a></li>
   <li><a href="#">大国关系</a></li>
   <li><a href="#">欧美风情</a></li>
</ul>
</div>
<div class="menuB">
 <ul style="display:block;" class="one">
 <li><a href="#">国际时事</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">精美壁纸</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">大国关系</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">欧美风情</a></li>
 </ul>
</div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
 if(elements[s].className==name){
  return elements[s];
 }
 }
}
var tabList = $_class("menuA").getElementsByTagName("li")
 tabCon = $_class("menuB").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
 var t = i;
 tabList[t].onmouseover = function(){
  for(o=0;o<tabCon.length;o++){
  tabCon[o].style.display = "none";
  tabList[o].className = "";
  if(t==o){
   this.className = "check";
   tabCon[o].style.display = "block";
  }
  }
 }
 })()
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
javaScript基础详解
Jan 19 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
JS实现跟随鼠标的链接文字提示框效果
Aug 06 #Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 #Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 #Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 #Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
You might like
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
Python验证码识别处理实例
2015/12/28 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
程序员机试试题汇总
2012/03/07 面试题
中专生职业生涯规划书范文
2014/01/10 职场文书
保研推荐信
2014/05/09 职场文书
工作建议书范文
2014/05/13 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Redis批量生成数据的实现
2022/06/05 Redis