滑动门通用JS

最新推荐文章于 2020-05-24 20:35:48 发布
最新推荐文章于 2020-05-24 20:35:48 发布
阅读量1k 收藏
点赞数
文章标签： class border function xhtml c string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niithust/article/details/7597098
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />

<title>滑动门通用JS</title>

<style type="text/css">

<!--

 

body {

    margin:0px;

    padding:0px;

    font-size:12px;

    background:#eee;

    line-height:20px;

}

 

.bodyer {

    width:760px;

    margin:20pxauto auto;

    border:1pxdotted #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:1pxdotted #ccc;

}

 

.preview {

    margin:10px;

    padding:10px;

    overflow:hidden;

    background:#eee;

}

 

.cont {

    padding:10px;

}

 

.cls {

    clear:both;

}

 

.hidden {

    display:none;

}

 

#sourse {

    border:1pxdotted #ccc;

    width:600px;

    height:300px;

    margin:0pxauto;

}

 

.textDiv {

    margin:10px40px 10px;

    text-align:center;

}

 

h2 {

    margin:0px10px;

    background:#ccc;

    padding:5px;

}

 

.example {

    margin:10px;

    background:#FFF;

    border:1pxdotted #ccc;

    padding:10px;

}

 

.scrolldoorFrame {

    width:400px;

    margin:0pxauto;

    overflow:hidden;

}

 

.scrollUl {

    width:400px;

    border-bottom:1pxsolid #CCC;

    overflow:hidden;

    height:35px;

}

 

.scrollUl li {

    float:left;

}

 

.bor03 {

    border:1pxsolid #ccc;

    border-top-width:0px;

}

 

.sd01 {

    cursor:pointer;

    border:1pxsolid #CCC;

    background:#FFF;

    margin:5px;

    padding:2px;

    font-weight:bold;

}

 

.sd02 {

    cursor:pointer;

    border:0pxsolid #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">

  <divclass="preview">

    <divclass="scrolldoorFrame">

      <ulclass="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>

  <divclass="preview">

    <divclass="scrolldoorFrame">

      <ulclass="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>

  <divclass="preview">

    <divclass="scrolldoorFrame">

      <ulclass="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>


niithust
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实用 JS滑动门
11-21
滑动门效果 采用js和css结合的方式！
简单通用的JS滑动门代码
12-01
这个例子中，我们看到的是一个使用JavaScript和CSS实现的简单通用的滑动门代码。 首先，HTML部分创建了一个无序列表`<ul id="tabMainNav">`，其中包含了四个列表项`<li>`。每个列表项都有一个唯一的ID，并且通过`...
js滑动门
applechong的专栏
08-31 87
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
js 滑动门
zw7534313的专栏
12-04 118
    http://www.2cscs.com/web/Soft/huadongmen/200909/588.html  滑动门
JS实现简单的滑动门
DOM曼珠沙华的博客
05-24 408
这个是为了体验DOM操作的过程实现的： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动门</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ height: 275px; margin: 0
js实现滑动门效果
遇见更好的自己
03-16 3345
滑动门效果： 原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。 假设图片的宽度是120px，其他三道门露出的宽度是80px， 初始状态下， 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。 当第二道门打开时， 第二道门左边的距离是80px，为（120-40）px 第三道和第四道门左边的距离不变。
javascript 通用滑动门tab类
10-30
滑动门（Sliding Doors）技术是网页设计中一种常见的UI效果，主要应用于导航栏或标签页，通过CSS和JavaScript实现。在这个场景下，我们讨论的是一个用JavaScript编写的通用滑动门类，它可以被封装以便在不同的项目中...
通用滑动门选项卡效果
01-23
通用滑动门选项卡效果是一种常见的网页交互设计技术，它被广泛应用于网页界面，以提供更高效、整洁的用户体验。这种效果通常出现在网页顶部或侧边，用于展示多个板块的内容，用户可以通过点击或滑动来切换不同的选项...
简单滑动门js代码
chenshu0的博客
11-28 1732
代码如下学习点 立即调用的函数表达式 //使用立即调用的函数表答式，为了获得不同的i值 for(i=0;i<5;i++){ (function(i){ 用的i的内容 })(i); } 了解更多请点击 2. 逻辑解释 //计算每道门打开时应移动的距离 var translate = imgWidth - exposeWidth; //为每道门绑定事
js 滑动门的实现
weixin_30908941的博客
12-14 136
原理：滑动门，这里以图片进行实例，首先设定主盒子div的宽度和高度设定，并进行图片初始化位置的设定，然后将图片绑定事件，并设定要达到的效果 html代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
滑动门(js封装类,javascript,选项卡,滑动门,tag) 通用滑动门
04-21
滑动门(js封装类,javascript,选项卡,滑动门,tag) 通用滑动门
一个不错的,简单的,很实用的,CSS+js自动滑动的滑动门!!
05-29
一个不错的,简单的,很实用的,CSS+js自动滑动的滑动门!!!值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JS+CSS实现简单滑动门(滑动菜单)效果
10-23
主要介绍了JS+CSS实现简单滑动门(滑动菜单)效果,通过JavaScript响应鼠标事件动态设置页面元素样式实现滑动菜单功能,需要的朋友可以参考下
JS实现滑动门效果的方法详解
11-28
本文实例讲述了JS实现滑动门效果的方法。分享给大家供大家参考，具体如下： 描述：鼠标移动到一副图片上，会显示该副图片的全貌，而其他图片会显示概貌，效果图如下： 一、没有动画效果的运动 思路： 1.定好每张图片的初始位置（第一张完全显示，234只露出一部分） 2.计算每道门的移动距离（即未显露的部分） 3.绑定鼠标滑过事件 [removed]=function(){ var box=document.getElementById("box"); var img=box.getElementsByTagName("img"); //单张图片宽度 var imgWidth
js实现简洁的滑动门菜单(选项卡)效果代码
11-23
本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下： 一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了Js自定义函数：tabMenu，函数功能：实现tab菜单，参数说明：tabMenu(tabBox,navClass); 参数一：tabBox（tab容器id） 参数二：navClass（当前标签样式class） 备注：依赖指定html结构。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-simple-scroll-menu-tab-
JS滑动门效果
struggle_xu
08-04 1848
超多滑动门效果 * { margin:0; padding:0; } body { font-size:12px; } ul, li { list-style-type:none; } #tab { width:500px; height:200px
如何用js形成滑动门效果
踏雪无痕的博客
07-08 1024
一、建立html、css、javascript三个文件在这里，我分别命名为index.html、img.css、translate.js。分别用于写三种代码，然后再index中添加&lt;link rel="stylesheet" href="img.css"&gt; &lt;script src="translate.js"&gt;&lt;/script&gt;（在这里，我的三个文件是同一目录的..
[网页]js滑动门类实例
12-17 68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &...
js实现多项滑动门选项卡特效
最新发布
05-29
好的，以下是一个简单的实现多项滑动门选项卡特效的示例代码： HTML结构： ``` <span class="tab active">Tab 1 <span class="tab">Tab 2 <span class="tab">Tab 3 <p>Tab 1 content <p>Tab 2 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值