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 使用手册(二)
Sep 23 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
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
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php多重接口的实现方法
2015/06/20 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python中的并发编程实例
2014/07/07 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python实现公司年会抽奖程序
2019/01/22 Python
python里dict变成list实例方法
2019/06/26 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
写给女生的道歉信
2014/01/14 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
超市创业计划书
2014/09/15 职场文书
关于工作经历的证明书
2014/10/11 职场文书
今日说法观后感
2015/06/08 职场文书
任命书格式模板
2015/09/22 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL