`
wjm901215
  • 浏览: 154269 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

css+div的滑动门的源码

    博客分类：
  • java
CSSJ#JavaScriptprototype 
阅读更多 
<html>
<head>
<meta name="keywords" content="通用滑动门" />
<meta name="description" content="通用滑动门" />
<title>通用滑动门</title>
<style type="text/css">
<!--
body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}
.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}
.t_rt{text-align:right;}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}
ul,li{margin:0px;padding:0px;}
li{list-style-type:none;}
h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}
.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
h2{margin:0px 10px;background:#ccc;padding:5px;}
.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}
.scrolldoorFrame{width:400px;margin:0px auto;overflow:hidden;}
.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}
.scrollUl li{float:left;}
.bor03{border:1px solid #ccc;border-top-width:0px;}
.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}
.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}
-->
</style>
<script type="text/javascript">
function scrollDoor(){
}//通用滑动门
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}//通用滑动门
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}//通用滑动门
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02");
SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");
}//通用滑动门
</script>
</head>
<body>
<div class="bodyer">
<h1 class="t_rt">
滑动门封装类
</h1>
<h2>
效果预览
</h2>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="m01">滑动门</li>
<li class="sd02" id="m02">滑动门</li>
<li class="sd02" id="m03">滑动门</li>
<li class="sd02" id="m04">滑动门</li>
<li class="sd02" id="m05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="c01">
站长特效一号内容
</div>
<div id="c02" class="hidden">
站长特效二号内容
</div>
<div id="c03" class="hidden">
站长特效三号内容
</div>
<div id="c04" class="hidden">
站长特效四号内容
</div>
<div id="c05" class="hidden">
站长特效五号内容
</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="mm01">滑动门</li>
<li class="sd02" id="mm02">滑动门</li>
<li class="sd02" id="mm03">滑动门</li>
<li class="sd02" id="mm04">滑动门</li>
<li class="sd02" id="mm05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="cc01">
站长特效一号内容
</div>
<div id="cc02" class="hidden">
站长特效二号内容
</div>
<div id="cc03" class="hidden">
站长特效三号内容
</div>
<div id="cc04" class="hidden">
站长特效四号内容
</div>
<div id="cc05" class="hidden">
站长特效五号内容
</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="mmm01">滑动门</li>
<li class="sd02" id="mmm02">滑动门</li>
<li class="sd02" id="mmm03">滑动门</li>
<li class="sd02" id="mmm04">滑动门</li>
<li class="sd02" id="mmm05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="ccc01">
站长特效一号内容
</div>
<div id="ccc02" class="hidden">
站长特效二号内容
</div>
<div id="ccc03" class="hidden">
站长特效三号内容
</div>
<div id="ccc04" class="hidden">
站长特效四号内容
</div>
<div id="ccc05" class="hidden">
站长特效五号内容
</div>
</div>
</div>
</div>
</div>
</body>
</html>

 

分享到：
| 简单万年历
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    精美css+div网站实例源码

    本资源"精美css+div网站实例源码"提供了四个不同样式的网站源码，分别是lotusflower、gumamela、CleanandBlue和fotolandia，非常适合初学者和有经验的开发者学习和参考。 1. **CSS布局**: 这些源码实例展示了如何...

    css+div的滑动门的

    在提供的压缩包文件`css+div的滑动门的源码.htm`中，可以看到一个简单的滑动门示例。这个示例展示了如何将上述理论应用到实际的HTML页面中，通过查看源代码，你可以更深入地理解滑动门的实现方式。 滑动门技术在...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单...

    多功能电子相册翻书页效果特效HTML+css+js代码

    例如，当用户在页面边缘滑动时，JavaScript可以捕捉到这一行为并执行相应的翻页动画。 3. Canvas或SVG图形：为了实现更精细的动画效果，开发者可能会使用HTML5的Canvas或SVG元素来绘制翻页的细节，如纸张的折叠、...

    css滑动门加数据读取

    在描述中提到的“已带打开器.ASP源码”，意味着这个压缩包可能包含了一个ASP（Active Server Pages）实现的滑动门功能。ASP是微软开发的一种服务器端脚本环境，用于生成动态网页。结合CSS和JavaScript，ASP可以创建...

    漂亮的div css tab源码

    DIV+CSS布局实例：TAB滑动门标签切换代码 比较实用的CSS控制链接颜色效果

    很酷滑动效果菜单,div+css制作，js源码奉送

    每个菜单项可能是一个单独的`div`，或者嵌套在主菜单`div`内，通过CSS控制其位置和样式。 CSS（层叠样式表）则负责菜单的外观和布局。通过设置`position`属性（如`relative`、`absolute`或`fixed`），可以实现菜单...

    滑动TAB，滑动门

    在本篇文章中，我们将深入探讨滑动门背后的实现原理、技术选型以及如何通过源码实现这一功能。 滑动门设计的核心在于用户交互和内容的动态展示。它涉及到HTML、CSS和JavaScript（或其库，如jQuery）等关键技术。...

    jQuery实现的图片滑动门效果（源码，经典）

    【jQuery实现的图片滑动门效果】是一种常见的网页动态展示技术，主要应用于网站的广告轮播、产品展示等场景。这种效果通过jQuery库的高效处理，使得多张图片能够以平滑过渡的方式进行切换，提升用户体验，同时也为...

    左右可伸缩滑动门漂亮效果(js 源码)

    "左右可伸缩滑动门"是一种常见的网页特效，它通过JavaScript和CSS技术实现，尤其在广告设计和界面展示中颇为流行。本教程将深入探讨如何利用JQuery、div+css技术创建这种效果。 首先，JQuery是一个广泛使用的...

    html滑动门实现

    HTML滑动门是一种常见的网页设计技术，主要用于导航菜单或图片展示，通过CSS和JavaScript实现元素的动态滑动效果，给予用户更加丰富的交互体验。在这个案例中，我们将探讨如何使用HTML、CSS以及JavaScript来创建一个...

    jquery牛逼滑动门

    在深入研究源码时，你可能会发现一些关键的jQuery函数，比如`.click()`用于绑定点击事件，`.stop()`用于停止当前动画，`.toggleClass()`用于切换元素的CSS类，这些都对理解整个滑动门机制至关重要。同时，通过调整...

    jQuery实现车门滑动效果菜单源码，很帅哦

    我们将关注jQuery库的核心功能，CSS样式以实现视觉效果，以及如何将这些元素结合在一起创建出所述的“车门”滑动效果。 首先，jQuery是一种轻量级的JavaScript库，它简化了DOM操作、事件处理和动画效果。在这个项目...

    div+CSS3实现的30个鼠标经过悬停图片动画显示特效源码.zip

    《div+CSS3实现的30个鼠标经过悬停图片动画显示特效源码解析》 在Web开发领域，视觉效果的吸引力是提升用户体验的关键因素之一。CSS3作为现代网页设计的重要工具，为开发者提供了丰富的样式控制和动态效果，使得...

    css tab 一个自动生成纯CSS精致漂亮的菜单工具

    描述中提到的“圆角菜单（类似滑动门）”是指一种特定的CSS技术，即使用伪元素和相对定位来实现的滑动门效果。滑动门技术使得菜单项的背景图像可以被分割为两部分，当鼠标悬停时，只改变一部分的可见性，从而创造出...

    腾讯网滑门效果源码.rar

    在本案例中，源码的实现基于HTML、CSS和JavaScript技术，特别适用于想要为自己的网站添加类似腾讯网滑动门效果的开发者。 HTML是网页的基础结构语言，用于定义网页的内容和布局。在"index.html"文件中，我们可以...

    JQuery Tab 滑动们导航菜单效果

    《JQuery Tab 滑动门导航菜单效果详解》 在网页设计中，导航菜单是不可或缺的一部分，它帮助用户快速定位并访问网站的不同区域。本文将深入探讨如何使用JQuery库实现一种独特的“滑动门”（Sliding Doors）导航菜单...

    网站模板2-木门品牌门业厂家网站页面html源码模板.zip

    2. **主体**：通常分为多个部分，如首页幻灯片、产品展示、关于我们、新闻动态、服务支持等，这些都可能在HTML源码中作为独立的段落或div元素存在。 3. **产品展示**：这部分会使用HTML和CSS（Cascading Style ...

    基于HTML实现qq音乐项目html静态页面（完整源码）

    7. **动画效果**：利用CSS3动画和过渡效果增强用户交互体验，如按钮悬停效果、滑动切换等。 这个项目提供了一个绝佳的实践平台，让你将学到的HTML和CSS理论知识应用到实际项目中，同时也能锻炼到问题解决和调试技能...

    网上收集的JS，还不错

    9. **漂亮淡蓝色滑动门代码.html** - “滑动门”是一种CSS布局技巧，但这里可能是用JavaScript实现的，可能用于创建响应式按钮或其他图形元素，具有平滑过渡效果。 10. **Js动画打开、关闭层的演示代码.html** - 层...

Magicbox
Global site tag (gtag.js) - Google Analytics