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 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
jQuery拖动图片删除示例
May 10 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
js常用函数 不错
2006/09/08 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python版DDOS攻击脚本
2019/06/12 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
单位成立周年感言
2014/01/26 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
家具商场的活动方案
2014/08/16 职场文书
锦旗赠语
2015/06/23 职场文书
德能勤绩工作总结
2015/08/11 职场文书