JS实现仿新浪黄色经典滑动门效果代码


Posted in Javascript onSeptember 27, 2015

本文实例讲述了JS实现仿新浪黄色经典滑动门效果代码。分享给大家供大家参考。具体如下:

这是一款仿新浪网的滑动门,黄色经典,操作舒适度确实很舒服,不亏是门户哦,长度和宽度这个就要自己修改啦,布局紧凑合理,本人喜欢的风格。

运行效果截图如下:

JS实现仿新浪黄色经典滑动门效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新浪滑动门</title>
<style type="text/css">
*{font:12px "宋体";margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
.TabADS{width:160px;}
.TabADS ul{width:160px; height:24px;background:#fff;}
.TabADS li{width:40px; float:left; height:18px; padding:6px 0 0 0; background:url(images/sinahome_ws_013.gif) no-repeat right #e4e4e4; text-align:center; color:#333; cursor:pointer;}
.TabADS .TasADSOn{background:url(images/sinahome_ws_012.gif) no-repeat right #ffe4a6; text-align:center; color:#333; font-weight:bold; cursor:pointer;}
.TabADSCon{background:#FFD77B;padding:5px;width:150px;}
.TabADSCon li{text-align:left; line-height:20px;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function Show_TabADSMenu(tabadid_num,tabadnum){
  for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
  for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}
  document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";
  document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
<div class="TabADS">
<ul>
<li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">VB</li>
<li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">ASP</li>
<li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">PHP</li>
<li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">cgi</li>
</ul>
</div>
<div class="TabADSCon">
<ul id="tabadcontent_10">
<li><a href="#" target="_blank">基于VC的推箱子游戏</a></li>
</ul>
<ul id="tabadcontent_11" style="display:none;">
<li><a href="#" target="_blank">VB批量更改文件名(重命名)程序</a></li>
</ul>
<ul id="tabadcontent_12" style="display:none;">
<li><a href="#" target="_blank">VC++ 五子棋游戏进阶版源码</a></li>
</ul>
<ul id="tabadcontent_13" style="display:none;">
<li><a href="#" target="_blank">精美多模式DELPHI闹钟程序</a></li>
</ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
javascript执行环境及作用域详解
May 05 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
AngularJS基础教程之简单介绍
Sep 27 #Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 #Javascript
浅谈javascript的Touch事件
Sep 27 #Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 #Javascript
浅谈Javascript中Object与Function对象
Sep 26 #Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 #Javascript
深入分析jsonp协议原理
Sep 26 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
django中静态文件配置static的方法
2018/05/20 Python
python 字符串追加实例
2019/07/20 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Python实现疫情地图可视化
2021/02/05 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
护士自我鉴定
2013/10/23 职场文书
文明寝室申报材料
2014/05/12 职场文书
关于颐和园的导游词
2015/01/30 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
python OpenCV学习笔记
2021/03/31 Python
Java如何实现树的同构?
2021/06/22 Java/Android
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL