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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
javascript实现日期格式转换
Dec 16 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
小程序和web画三角形实现解析
Sep 02 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
建立动态的WML站点(二)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
10张动图学会python循环与递归问题
2021/02/06 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
业务总经理岗位职责
2014/02/03 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
应急管理培训方案
2014/06/12 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
亮剑观后感300字
2015/06/05 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle