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


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

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

运行效果截图如下:

在线演示地址如下:

http://demo.phpstudy.net/js/2015/js-f-sina-jd-move-style-demo/

具体代码如下:

<!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程序设计有所帮助。



相关阅读:
Android编程之ListPreference用法实例分析
win10升级C盘东西还有吗 win10自动升级后桌面文件会丢失吗
Android编程实现泡泡聊天界面实例详解(附源码)
基于javascript简单实现对身份证校验
8个实用的jQuery技巧
MySQL性能优化
Win10 Mobile预览版10563上手图集:Edge书签同步等多处改进
PHP中如何调用webservice的实例参考
Android中监听短信的两种方法
Android HTTP网络请求的异步实现
C#中事件的动态调用实现方法
两个php日期控制类实例
win2008 R2 WEB环境配置之MYSQL 5.6.22安装版安装配置方法
win8.1系统开机屏幕总是会闪一下或黑屏一会才进入桌面的故障原因及解决方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 为你我愿意等 玫瑰花作文400字 亲爱的,好想你,知道或许你根本不在乎我 在阳光下成长诗歌 飘飞的思绪…… 电业局文明建设十一五规划 这个春天,是落下的花在埋葬着我们的青春 七堇年语录 音乐会150字 物质与精神 奥运冠军作文 《红岸止》忧伤的童年歌谣 相思书作文300字 水文站述职报告 读《纸雁儿》有感800字 圣诞祝福短信给前任 “嘉年华”刺激一玩1000字 描写秋天的风的句子 秋天的风象一群娃娃 小学教师优秀演讲稿 令我敬佩的一个人 学习科学发展观调研阶段工作计划 总算有了一个家 走马灯为什么会“走” 教师招考教育学试题整理 南国,二月的风 我的季节不下雪_关于友谊的话题作文700字 樱雨星作文250字 巧取豪夺造句 大学生自我介绍 假如我是池中的一朵荷花作文100字 告别白宫 中国梦演讲稿:用“心”浇灌我们的梦 夜上浓妆。『楼转朱阁(上)』作文3000字 追风的人 妹妹来我家作文 党的十七大报告关键词解读:生态文明 2016公司党委与街道党工委联建协议签订仪式主持词 高三记叙文大全:雅安我为你祈福作文800字 我爱过的女孩子、这才是真实的我! 我能行的作文 傻宝贝以后别说傻话了 丑小鸭我想对你说作文300字 牵手了,就这么一直走下去吧 工作上失职检讨书范文 内外交困反义词_内外交困近义词 小班六一儿童节亲子活动方案 两条腿的快马 5年级下册1单元作文 阅读成就梦想,梦想陪伴成长作文800字 刘仪伟的名言

Copyright © 2016 phpStudy |