JS+CSS实现简易的滑动门效果代码


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS+CSS实现简易的滑动门效果代码。分享给大家供大家参考。具体如下:

看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评。

运行效果截图如下:

JS+CSS实现简易的滑动门效果代码

在线演示地址如下:

具体代码如下:

<!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>学习练手写下个简易的滑动门</title>
<style>
*{
margin:0px;
padding:0px;
font-size:9pt;
}
#tab{width:400px;
height:auto;
margin:0 auto;
}
ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(15.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}/*margin;那里调节各个li之间的距离,position是保证下边框的出现*/
.dise{display:block;}
.undise{display:none;}
.fff{background:
url(images/tr.jpg);}
#all{clear:left; width:400px;}
#all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要设border*/
}
</style>
</head>
<script language="javascript">
function g(o){return document.getElementById(o);}
function showdiv(i){
for(j=1;j<=3;j++){
g("div"+j).className="undise"//将三个都设为undise,以便将来可以设置显示的那个;
g("li"+j).className=""//消除原来所有li的属性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
function showdiv1(i){
for(j=4;j<=6;j++){
g("div"+j).className="undise"//将三个都设为undise,以便将来可以设置显示的那个;
g("li"+j).className=""//消除原来所有li的属性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
</script>
<body>
 <div div id="tab">
  <ul>
  <li id="li1" class="fff"><span onmouseover="showdiv(1)">世界的中国</span></li>
  <li id="li2"><span onmouseover="showdiv(2)">网页特效</span></li>
  <li id="li3"><span href="#" onmouseover="showdiv(3)">脚本代码</span></li>
  </ul>
 <div id="all">
  <div id="div1" class="dise">学习型源码下载站。</div>
  <div id="div2" class="undise">精选网页特效,应有尽有~</div>
  <div id="div3" class="undise">高质量脚本代码资源随您下载!</div> 
 </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
JS trim去空格的最佳实践
Oct 30 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
JS实现网站菜单拖拽移位效果的方法
Sep 24 #Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 #Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 #Javascript
直接拿来用的15个jQuery代码片段
Sep 23 #Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 #Javascript
jQuery Validate验证框架经典大全
Sep 23 #Javascript
Javascript实现的简单右键菜单类
Sep 23 #Javascript
You might like
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
vue实现分页加载效果
2019/12/24 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
python实现维吉尼亚加密法
2019/03/20 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python可视化实现KNN算法
2019/10/16 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
祖国在我心中的演讲稿
2014/05/04 职场文书
公司节能减排方案
2014/05/16 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python