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 相关文章推荐
javascript自启动函数的问题探讨
Oct 05 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
JS实现音量控制拖动
Jan 15 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 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计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
cf收人广告词
2014/03/14 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
工作经验交流材料
2014/12/30 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL