js滑动门及对像的使用
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滑动门及对像的使用的更多相关文章
- js 滑动门的实现
原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- [Js]滑动门效果
描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...
- JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- 代码简洁的滑动门(tab)jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
随机推荐
- nyoj-257 郁闷的C小加(一) 前缀表达式变后缀
郁闷的C小加(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 我们熟悉的表达式如a+b.a+b*(c+d)等都属于中缀表达式.中缀表达式就是(对于双目运算符来说 ...
- Redis安装教程
1. Linux下Redis安装教程 (1)安装 #tar xf redis-2.6.14.tar.gz #cd redis-2.6.14 #make #make install (2)配置 修改re ...
- hdu 1885 Key Task (三维bfs)
题目 之前比赛的一个题, 当时是崔老师做的,今天我自己做了一下.... 还要注意用bfs的时候 有时候并不是最先到达的就是答案,比如HDU 3442 这道题是要求最小的消耗血量伤害,但是并不是最先到 ...
- 函数lock_rec_bitmap_reset
/*********************************************************************//** Resets the record lock bi ...
- BootStrap基本样式
文本对齐风格:.text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐 取消列表符号:.list-unstyled内联列表:.l ...
- DirectShow系统初级指南
流媒体的处理,以其复杂性和技术性,一向广受工业界的关注.特别伴随着因特网的普及,流媒体在网络上的广泛应用,怎样使流媒体的处理变得简单而富有成效逐渐成为了焦点问题.选择一种合适的应用方案,事半功倍.此时 ...
- ORACLE远程连接数据库
1. sqlplus sqlnet.ora 文件格式NAMES.DIRECTORY_PATH= (TNSNAMES,HOSTNAME).客户端就会首先在tnsnames.ora文件中找orcl的记录. ...
- ByteBuffer用法小结
在NIO中,数据的读写操作始终是与缓冲区相关联的.读取时信道(SocketChannel)将数据读入缓冲区,写入时首先要将发送的数据按顺序填入缓冲区.缓冲区是定长的,基本上它只是一个列表,它的所有元素 ...
- chrome console js多行输入
一直以来,Chrome控制台都缺少象IE调试台那样的多行执行模式. 今天意外发现Chrome其实也支持多行模式.默认在Chrome控制台上输入回车后会执行该命令,只需要通过输入Shift+Enter ...
- js基础学习第一天(关于DOM和BOM)一
关于BOM和DOM BOM 下面一幅图很好的说明了BOM和DOM的关系 BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及 ...