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内置对象 学习笔记
Aug 01 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
javascript中new关键字详解
Dec 14 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
JS图片预加载插件详解
Jun 21 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 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调用新浪短链接API的方法
2014/11/08 PHP
smarty中post用法实例
2014/11/28 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
浅谈js原生拖放
2016/11/21 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
webpack优化的深入理解
2018/12/10 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
业务部经理岗位职责
2014/01/04 职场文书
教师个人剖析材料
2014/02/05 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
活动简报范文
2015/07/22 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
深入详解JS函数的柯里化
2021/06/09 Javascript
mysql脏页是什么
2021/07/26 MySQL
bat批处理之字符串操作的实现
2022/03/16 Python