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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
vue-cli3 热更新配置操作
Sep 18 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
APMServ使用说明
2006/10/23 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
实现jquery放大镜的两种方法
2018/02/22 jQuery
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python 魔法函数实例及解析
2019/09/25 Python
Python pip使用超时问题解决方案
2020/08/03 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
一组SQL面试题
2016/02/15 面试题
写给女生的道歉信
2014/01/14 职场文书
党员公开承诺书范文
2014/03/25 职场文书
大型演出策划方案
2014/05/28 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript
Python中time与datetime模块使用方法详解
2022/03/31 Python