脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS仿新浪黄色经典滑动门效果

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

 更新时间：2015年09月27日 10:11:01   作者：企鹅  
这篇文章主要介绍了JS实现仿新浪黄色经典滑动门效果代码,是一款非常简单的经典鼠标响应滑动切换效果,涉及JavaScript基于鼠标事件动态操作页面元素的技巧,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript中的class类详解

    JavaScript中的class类详解

    JavaScript 中的类（Class）是一种新的语言特性，它让我们可以使用面向对象编程的思想来更加方便地组织和管理代码。在本文中，我们将详细介绍 JavaScript 中的类特性，感兴趣的同学可以借鉴阅读
    2023-05-05
  • js防抖和节流的深入讲解

    js防抖和节流的深入讲解

    这篇文章主要给大家介绍了关于js防抖和节流的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • JavaScript闭包 懂不懂由你反正我是懂了

    JavaScript闭包 懂不懂由你反正我是懂了

    如果你不能向一个六岁的孩子解释清楚，那么其实你自己根本就没弄懂。好吧，我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了
    2011-10-10
  • JavaScript实现页面一键全选或反选

    JavaScript实现页面一键全选或反选

    这篇文章主要为大家详细介绍了JavaScript实现页面一键全选或反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

    BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

    这篇文章主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
    2016-11-11
  • JavaScript中Window对象的属性及事件

    JavaScript中Window对象的属性及事件

    这篇文章主要介绍了JavaScript中Window对象的属性及事件 的相关资料,需要的朋友可以参考下
    2015-12-12
  • 提升JS编程效率的19个实用技巧分享

    提升JS编程效率的19个实用技巧分享

    在实际工作中,开发者常面临一些需巧妙编程解决的挑战,有时几行代码就能迎刃而解,本文整理了一系列实用代码片段,助您轻松处理URL、DOM操作、事件处理等常见问题,希望对大家有所帮助
    2023-11-11
  • layui表格设计以及数据初始化详解

    layui表格设计以及数据初始化详解

    今天小编就为大家分享一篇layui表格设计以及数据初始化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 浅谈javascript中replace()方法

    浅谈javascript中replace()方法

    这篇文章主要介绍了浅谈javascript中replace()方法，replace函数方法是返回根据正则表达式进行文字替换后的字符串的复制，需要的朋友可以参考下
    2015-11-11
  • JS实现提交表单前的数字及邮箱校检功能

    JS实现提交表单前的数字及邮箱校检功能

    在项目开发中经常会遇到表单提交功能，今天小编抽空给大家分享JS实现提交表单前的数字及邮箱校检功能，需要的朋友参考下吧
    2017-11-11

最新评论