[Javascript] 层控制(隐藏、显示、卷起、展开)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animate</title>
<script>
(
function(){
if(!window.dk){window['dk']={} }
//根据ID获取对象
function $(){
if(typeof(arguments[0]) == 'string')
return document.getElementById(arguments[0]);
else
return arguments[0];
}
window['dk']['$']=$;
//根据Class名称获取对象
function getElementByClassName(){};
window['dk']['getElementByClassName']=getElementByClassName;
//绑定事件
function addEvent(node,type,listener){
//if(!(node=$(node))){return false;}
if(node.addEventListener){
node.addEventListener(type,listener,false);
return true;
}
else if(node.attachEvent){
node['e'+type+listener]=listener;
node[type+listener]=function(){
node['e'+type+listener](window.event);
}
node.attachEvent('on'+type,node[type+listener]);
return true;
}
return false;
}
window['dk']['addEvent']=addEvent;
//移出绑定的事件
function removeEvent(node, type, listener){
if(node.removeEventListener){
node.removeEventListener(type,listener,false);
return true;
}else if(node.detachEvent){
node.detachEvent('on' + type, node[type+listener]);
node[type + listener] = null;
return true;
}
return false;
}
window['dk']['removeEvent'] = removeEvent;
//绑定函数的执行对象
function bind(targetObj,func){
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return func.apply(targetObj, args.concat(Array.prototype.slice.call(arguments)));
}
}
window['dk']['bind']=bind;
//检查childNode是被包含在parentNode中
function contains(parentNode,childNode){
return parentNode.contains ? parentNode != childNode && parentNode.contains(childNode) : !!(parentNode.compareDocumentPosition(childNode) & 16);
}
window['dk']['contains']=contains;
//获取Event对象
function getEvent(e){
return e || window.event;
}
window['dk']['getEvent']=getEvent;
//停止冒泡
function stopBubble(e){
getEvent(e).bubbles?getEvent(e).stopPropagation():getEvent(e).cancelBubble=true;
}
window['dk']['stopBubble']=stopBubble;
//恢复冒泡
function startBubble(e){
getEvent(e).initEvent?getEvent(e).initEvent():getEvent(e).cancelBubble=false;
}
window['dk']['startBubble']=startBubble;
//检查mouseover和mouseout模式下取消事件派发
function checkHover(e,target){
if(dk.getEvent(e).type=="mouseover"){
return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
}
else{
return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
}
}
window['dk']['checkHover']=checkHover;
//获取事件触发的对象
function getEventTarget(e){
return dk.getEvent(e).target || dk.getEvent(e).srcElement;
}
window['dk']['getEventTarget']=getEventTarget;
//获取窗口的大小
function getBrowserSize(){
var de=document.documentElement;
return {
width:(window.innerWidth||(de&&de.clientWidth)||document.body.clientWidth),
height:(window.innerHeight||(de&&de.clientHeight)||document.body.clientHeight)}
}
window['dk']['getBrowserSize']=getBrowserSize;
//获取对象在页面中的位置
function getPositionInDoc(target){
(typeof(target) == 'string') && (target = document.getElementById(target));
var left = 0, top = 0;
do {
left += target.offsetLeft || 0;
top += target.offsetTop || 0;
target = target.offsetParent;
}
while (target);
return {
left: left,
top: top
};
}
window['dk']['getPositionInDoc'] = getPositionInDoc;
window['dk']['pageDom'] = getPositionInDoc;
//获取鼠标在Document中的位置
function getMousePositionInDoc(e){
var scrollx, scrolly;
if (typeof(window.pageXOffset) == 'number') {
scrollx = window.pageXOffset;
scrolly = window.pageYOffset;
}
else {
scrollx = document.documentElement.scrollLeft;
scrolly = document.documentElement.scrollTop;
}
return {
x: e.clientX + scrollx,
y: e.clientY + scrolly
}
}
window['dk']['getMousePositionInDoc'] = getMousePositionInDoc;
window['dk']['pageMouse'] = getMousePositionInDoc;
//日志
function myLogs(id){
id=id||'defaultDebugLogs';
var logsWindow=null;
var initWindow=function(){
logsWindow=document.createElement('ol');
logsWindow.setAttribute('id',id);
var winStyle=logsWindow.style;
winStyle.position='absolute';
winStyle.top='10px';
winStyle.right='10px'
winStyle.width='200px';
winStyle.height='300px';
winStyle.border='1px solid #ccc';
winStyle.background='#fff';
winStyle.padding=0;
winStyle.margin=0;
document.body.appendChild(logsWindow);
}
this.writeRow=function(message){
logsWindow||initWindow();
var newItem=document.createElement('li');
newItem.style.padding='2px';
newItem.style.margin='0 0 1px 0';
newItem.style.background='#eee';
if(typeof(message)=='undefined'){
newItem.innerHTML='<span style=\"color:#f90;\">Message is undefined</span>';
}
else{
newItem.innerHTML=message;
}
logsWindow.appendChild(newItem);
}
} myLogs.prototype={
write:function(message){ if(typeof(message) == 'string'&&message.length==0){
return this.writeRow('<span style=\"color:#900;\">warning:</span> empty message');
}
if(typeof(message) != 'string' && typeof(message) != 'undefined'){
if(message.toString) return this.writeRow(message.toString());
else return this.writeRow(typeof(message));
}
if(typeof(message) == 'undefined'){
return this.writeRow('<span style=\"color:#f90;\">Message is undefined</span>');
}
message=message.replace(/</g,"<").replace(/</g,">");
return this.writeRow(message);
},
header:function(message){ }
}
window['dk']['logs'] = new myLogs();
//Dom加载完成事件
function ready(loadEvent){
var init = function(){
if(arguments.callee.done)
return;
arguments.callee.done = true;
loadEvent.apply(document,arguments);
} if(document.addEventListener){
document.addEventListener('DOMContentLoaded',init,false);
} if(/WebKit/i.test(navigator.userAgent)){
var _timer = setInterval(function(){
if(/loaded|complete/.test(document.readyState)){
clearInterval(_timer);
init();
}
},10)
} /*@if(@_win32)*/
document.write('<script id=__ie_onload defer src=javascript:void(0)><\/script>');
var script = document.getElementById('__ie_onload');
script.onreadystatechange = function(){
if(this.readyState == 'complete'){
init();
}
}
/*@end @*/
return true;
}
window['dk']['ready'] = ready;
})(); var _$ = function(node){
if(typeof(node) == 'string'){
node = dk.$(node);
}
this.node= node;
}
_$.prototype = {
fixover:function(func){
dk.addEvent(this.node,'mouseover',function(e){
if(dk.checkHover(e,this)){
func(e);
}
});
return this;
},
fixout:function(func){
dk.addEvent(this.node,'mouseout',function(e){
if(dk.checkHover(e,this)){
func(e);
}
})
return this;
},
css:function(styleName){
if (this.node.currentStyle) {
var value = this.node.currentStyle[styleName];
if(value == 'auto' && styleName == 'width'){
value = this.node.clientWidth;
}
if(value == 'auto' && styleName == 'height'){
value = this.node.clientHeight;
}
return value;
}
else if (window.getComputedStyle) {
var value = window.getComputedStyle(this.node, null).getPropertyValue(this.getSplitName(styleName));
return value;
}
},
getSplitName:function(styleName){
return styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
}
}
$$ = function(node){
return new _$(node);
}
var Tween={
Linear: function(t,b,c,d){ return c*t/d + b; },
Quad: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t + b;
},
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
},
Cubic: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
},
Quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
},
Back: {
easeIn: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
}
}
var Motion=function(target){
var t = 0;
var d = 150;
var delayTime = 10;
var styles=null;
var stylesChange={};
var stylesBegin={};
var callBackFunc=null;
var timer=null;
var quickStylesBefore=null;
var quickStylesAfter=null;
var animateStatus=false;
var funcQueue=[];
if(typeof(target)=='string')
target=document.getElementById(target); this.resetStatus=function(){
t=0;
styles=null;
stylesChange={};
stylesBegin={};
callBackFunc=null;
timer=null;
quickStylesBefore=null;
quickStylesAfter=null;
}
this.setDelayTime=function(_delayTime){
delayTime = _delayTime;
}
this.setStyles=function(_styles){
styles=_styles;
}
this.setCallBackFunc=function(_callBackFunc){
callBackFunc=_callBackFunc;
}
this.pushFuncToQueue = function(funcString){
funcQueue.push(funcString);
}
this.getAnimateStatus=function(){
return animateStatus;
}
this.setQuickStyle=function(_quickStyles,quickType){
if(quickType)
quickStylesBefore = _quickStyles;
else
quickStylesAfter = _quickStyles;
}
this.getTargetStyle=function(){
return {width:target.style.width || target.clientWidth,height:target.style.height || target.clientHeigth}
}
var calculatChange=function(){
for(var styleName in styles){
stylesChange[styleName]=parseInt(styles[styleName])-parseInt(target.style[styleName] || 0);
stylesBegin[styleName]=parseInt(target.style[styleName] || 0);
}
} var setTargetStyles=function(_styles){
for(var styleName in _styles){
target.style[styleName]=_styles[styleName];
}
} var beforeRun = function(){
quickStylesBefore && setTargetStyles(quickStylesBefore);
calculatChange();
target.style.display='block';
animateStatus = true;
} this.afterRun = function(){
if(target.style.width=='0px'||target.style.height=='0px')
target.style.display='none';
quickStylesAfter && setTargetStyles(quickStylesAfter);
if(funcQueue.length>0)
{
animateStatus = false;
var currentFuncArray=funcQueue.shift();
return currentFuncArray[0].apply(this,currentFuncArray[1]);
} animateStatus = false;
//this.slideDown();
} this.run=function(){ (t == 0) && beforeRun();
for(var styleName in styles){
target.style[styleName]=Tween.Quad.easeInOut(t,stylesBegin[styleName],stylesChange[styleName],d) + 'px';
}
t++;
if(t<=d)
return timer = setTimeout(dk.bind(this,this.run),delayTime);
this.afterRun();
if(callBackFunc)
return callBackFunc();
}
}
Motion.prototype={
animate : function(styles,callBackFunc){
if(this.getAnimateStatus())
return this.pushFuncToQueue([this.animate,arguments]);
this.resetStatus();
this.setStyles(styles)
this.setCallBackFunc(callBackFunc);
this.run();
},
slideDown:function(callBackFunc){
if(this.getAnimateStatus())
return this.pushFuncToQueue([this.slideDown,arguments]);
this.resetStatus();
var targetStyle=this.getTargetStyle();
this.setQuickStyle({height:'0px'},true);
this.setStyles({height:targetStyle.height});
this.setCallBackFunc(callBackFunc);
this.run();
},
slideUp:function(callBackFunc){
if(this.getAnimateStatus())
return this.pushFuncToQueue([this.slideUp,arguments]);
this.resetStatus();
var targetStyle=this.getTargetStyle();
this.setQuickStyle({height:targetStyle.height},false);
this.setStyles({height:'0px'});
this.setCallBackFunc(callBackFunc);
this.run();
},
show:function(callBackFunc){
this.resetStatus();
var targetStyle=this.getTargetStyle();
this.setQuickStyle({width:'0px',height:'0px'},true);
this.setStyles({width:targetStyle.width,height:targetStyle.height});
this.setCallBackFunc(callBackFunc);
this.run();
},
hide:function(callBackFunc){
this.resetStatus();
var targetStyle=this.getTargetStyle();
this.setQuickStyle({width:targetStyle.width,height:targetStyle.height},false);
this.setStyles({width:'0px',height:'0px'});
this.setCallBackFunc(callBackFunc);
this.run();
}
}
var divA;
window.onload=function(){
divA=new Motion('myDiv');
}
</script>
</head>
<body>
<div id="myDiv" style="position:absolute;left:0;background:#f00; overflow:hidden;width:300px; height:500px;display:block;">This is out test content.</div>
<div id="div2" style="position:absolute; right:0; background:#ff0;"><a href="http://www.baidu.com" target="_blank" onclick="alert('a');return false;">Hello</a></div>
<input type="button" id="btn1" value="hide" onclick="divA.animate({width:'0px'})" style="position:fixed; bottom:0; left:40%;"/>
<input type="button" id="btn2" value="show" onclick="divA.animate({width:'600px'})" style="position:fixed; bottom:0; left:50%;"/>
<input type="button" id="btn3" value="slideUp" onclick="divA.slideUp()" style="position:fixed; bottom:0; left:60%;"/>
<input type="button" id="btn4" value="slideDown" onclick="divA.slideDown()" style="position:fixed; bottom:0; left:70%;"/>
</body>
</html>
[Javascript] 层控制(隐藏、显示、卷起、展开)的更多相关文章
- jQuery新版本没有了Toggle事件，两个按钮分别控制隐藏显示，同时这两个按钮点击也要互斥。
十二月没来得及整理发布,一直在草稿箱.现在已经2019年1月了... 需求大概是这样的 //XX点击事件 var flagBar = 0; $("#doNotBaseRate"). ...
- 多个div独立控制其显示/隐藏
今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- [转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
- angular学习笔记(八)-控制视图显示隐藏
本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐 ...
- js 控制div 显示隐藏的问题
var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...
随机推荐
- C# List<T>转成DataTable
//将List<T>转成DataTable public static DataTable ToDataTable(List<T> collection) ...
- Java集合（一）HashMap
HashMap 特点: HashMap的key和value都允许为空,无序的,且非线程安全的 数据结构: HashMap底层是一个数组,数组的每一项又都是链表,即数据和链表的结合体.当新建一个Hash ...
- Android 自定义控件之圆形扩散View（DiffuseView）
实现效果 使用 属性方法 代码 源码下载 参考链接 实现效果 使用 XML中: <com.airsaid.diffuseview.widget.DiffuseView android:id=&q ...
- 前端web通过flask操作数据库-增删改查
后端python代码: #coding:utf8 from flask import Flask,request,render_template import pymysql as mysql imp ...
- 如何把数值或者对象添加到ArrayList集合
生成6个1~33之间的随机整数,添加到集合,并遍历 public class ArrayListDemo1 { public static void main(String[] args) { // ...
- VS Code编写html（2）
<html> <head> <title>welcome to myspace</title> <meta charset="utf-8 ...
- 设置Pycharm在创建py文件时自动添加文件头注释(类似于钩子特性)
在每次新建一个py文件的时候 1 如何自动添加 #!/usr/bin/env python2 自动添加 #-*- coding: utf-8 -*- 操作方法: File -> se ...
- 训练1-X
输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数. Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这个测试实例的数值的个数,跟着就是n个整数.n ...
- BZOJ 3144 [HNOI2013]切糕 (最大流+巧妙的建图)
题面:洛谷传送门 BZOJ传送门 最大流神题 把点权转化为边权,切糕里每个点$(i,j,k)$向$(i,j,k+1)$连一条流量为$v(i,j,k)$的边 源点$S$向第$1$层的点连边,第$R+1$ ...
- JAVA 上传图片功能
前后端实现上传图片功能(JAVA代码) 1.前端大概 请求头必须为AJAX请求头: 'X-Requested-With': 'XMLHttpRequest' 一般是指网页中存在的Content-Typ ...