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版代码高亮
Jun 26 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
vue.js实现简单的计算器功能
Feb 22 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
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
javaScript语法总结
2016/11/25 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
python列表操作实例
2015/01/14 Python
详解Django中的过滤器
2015/07/16 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python得到windows自启动列表的方法
2018/10/14 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python常用编译器原理及特点解析
2020/03/23 Python
HTTP状态码详解
2021/03/18 杂记
美国最大点评网站:Yelp
2018/02/14 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
科研课题实施方案
2014/03/18 职场文书
大学生活自我评价
2014/04/09 职场文书
努力工作保证书
2015/02/28 职场文书
多人股份制合作协议书
2016/03/19 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL