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";
}
}
},
def: function (menus, divs, openClass, closeClass, menu, divshow) {
var _this = this;
for (var j = 0; j < menus.length; j++) {
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menu).className = openClass;
_this.$(divshow).style.display = "block";
},
$: function (oid) {
if (typeof (oid) == "string")
return document.getElementById(oid);
return oid;
}
} 使用
 var SDmodel = new scrollDoor();
SDmodel.sd(["d1","d2"],["c1","c2"],"li_up",""); 案例
http://esf.sh.soufun.com/agent/agtagent/27686210.htm

js滑动门及对像的使用的更多相关文章

  1. js 滑动门的实现

    原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...

  2. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  3. [Js]滑动门效果

    描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...

  4. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  5. Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  6. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  7. 代码简洁的滑动门(tab)jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  8. 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

随机推荐

  1. Shell 是个什么玩意

    Shell的定义: 计算机分为软件和硬件,管理计算机硬件的是操作系统,也就是我们说的kernel,而这个核心是需要被保护起来的. 那我们如何通过软件与硬件进行沟通,让硬件执行我们要完成的指令呢? 这个 ...

  2. ExtJs自学教程(2):从DOM看EXTJS

    <二> 从DOM看EXTJS 看标题可能有人会问,为啥好好的例子不看,得从DOM看起呢?答案是目标只为了一个:自运行结果把EXTJS看得更清楚点 首先,要看得靠点工具,带点放大镜什么吧?对 ...

  3. [POJ2398]Toy Storage(计算几何,二分,判断点在线段的哪一侧)

    题目链接:http://poj.org/problem?id=2398 思路RT,和POJ2318一样,就是需要排序,输出也不一样.手工画一下就明白了.注意叉乘的时候a×b是判断a在b的顺时针还是逆时 ...

  4. [HDOJ1811]Rank of Tetris(并查集、拓扑排序)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1811 求一堆数据的拓扑序. 处理:x>y就是x到y一条边,x<y就是y到x一条边.关键问题 ...

  5. [UESTC1059]秋实大哥与小朋友(线段树, 离散化)

    题目链接:http://acm.uestc.edu.cn/#/problem/show/1059 普通线段树+离散化,关键是……离散化后建树和查询都要按照基本法!!!RE了不知道多少次………………我真 ...

  6. Windows下搭建Mysql集群

    Mysql集群的基本架构如下: 基本原理参考:[转]MySQL Cluster (集群)基本原理 这里采用最小配置,用两台机器来分别部署一个management 节点,2个data node, 2个s ...

  7. Huge CSV and XML Files in Python, Error: field larger than field limit (131072)

    Huge CSV and XML Files in Python January 22, 2009. Filed under python twitter facebook pinterest lin ...

  8. Codeforces Round #259 (Div. 2) C - Little Pony and Expected Maximum

    题目链接 题意:一个m个面的骰子,抛掷n次,求这n次里最大值的期望是多少.(看样例就知道) 分析: m个面抛n次的总的情况是m^n, 开始m==1时,只有一种 现在增加m = 2,  则这些情况是新增 ...

  9. PL/SQL database character set(AL32UTF8) and Client character set(ZHS16GBK) are different 2012-04-11 13:01

    启动PL/SQL Developer 报字符编码不一致错误 Database character set (AL32UTF8) and Client character set (ZHS16GBK) ...

  10. GET,POST,PUT,DELETE的区别

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...