js常见函数汇总
/**
* 隐藏元素
* @param {String} elem
*/
function hide(elem){
var curDisplay = getStyle(elem, 'display');
if(curDisplay != 'none'){
elem.oldDisplay = curDisplay;
}
elem.style.display = 'none';
}
/**
* 显示元素
* @param {String} elem
*/
function show(elem){
elem.style.display = elem.oldDisply || 'block';
}
/**
* 设置透明度
* @param {Object} elem
* @param {Object} level (0-100)
*/
function setOpacity(elem, level){
if(elem.filters){ //如果是IE
elem.style.filter = 'alpha(opacity=' + level + ')';
//必须设置zoom,要不然透明度在IE下不生效 From:http://blog.csdn.net/dxx1988/article/details/6581430
elem.style.zoom = 1;
} else { //否则是W3C
elem.style.opacity = level / 100;
}
}
/**
* 滑动
* @param {Object} elem
*/
function slideDown(elem){
//elem.style.height = '0px';
show(elem);
var h = fullHeight(elem);
for(var i=0; i<=100; i+=5){
(function(){
var pos = i;
setTimeout(function(){
elem.style.height = (pos/100) * h + 'px';
}, (pos + 1) * 5);
})();
}
}
//slideDown($('pText'));
//alert(fullHeight($('pText')));
/**
* 透明度渐显 From: http://mrthink.net/js-fadein-fadeout-fadeto/
* @param {Object} elem
* @param {Number} speed 淡入速度,正整数(可选)
* @param {Number} opacity 淡入到指定的透明度,0~100(可选)
*/
function fadeInThink(elem, speed, opacity){
speed = speed || 20;
opacity = opacity || 100;
show(elem);
setOpacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
setOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
/**
* 透明度渐显
* @param {Object} elem
*/
function fadeIn(elem){
//setOpacity(emel, 0);
show(elem);
for(var i=0; i<=100; i+=10){
(function(){
var pos = i;
setTimeout(function(){
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
/**
* 透明度渐隐 From: http://mrthink.net/js-fadein-fadeout-fadeto/
* @param {Object} elem
*/
function fadeOut(elem){
var val = 100;
(function(){
setOpacity(elem, val);
val -= 5;
if(val >= 0){
setTimeout(arguments.callee, 50);
} else if(val < 0){
hide(elem);
}
})();
}
//fadeInThink($('pText'));
/**
* 光标的水平位置
* @param {Object} e
*/
function getX(e){
e = e || window.event;
return e.pageX || e.clientX + document.body.scrollLeft;
}
/**
* 光标的垂直位置
* @param {Object} e
*/
function getY(e){
e = e || window.event;
return e.pageY || e.clientY + document.body.scrollTop;
}
/**
* 获得鼠标相对于当前元素的X位置
* @param {Object} e
*/
function getElementX(e){
return (e && e.layerX) || window.event.offsetX;
}
/**
* 获得鼠标相对于当前元素的Y位置
* @param {Object} e
*/
function getElementY(e){
return (e && e.layerY) || window.event.offsetY;
}
/**
* 当前页面的高度
*/
function pageHeight(){
return document.body.scrollHeight;
}
/**
* 当前页面的宽度
*/
function pageWidth(){
return document.body.scrollWidth;
}
//alert(pageHeight());
/**
* 视口的高度
*/
function windowHeight(){
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
/**
* 视口的高度
*/
function windowWidth(){
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
}
/**
* 浏览器水平滚动位置
*/
function scrollX(){
var de = document.documentElement;
return self.pageOffsetset || (de && de.scrollLeft) || document.body.scrollLeft;
}
/**
* 浏览器垂直滚动位置
*/
function scrollY(){
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
js常见函数汇总的更多相关文章
- 常见算法是js实现汇总(转载)
常见算法是js实现汇总 /*去重*/ <script> function delRepeat(arr){ var newArray=new Array(); var len=arr.len ...
- 最新Node.js 资源汇总
Node.js 资源汇总 文档 Node.js 官方文档:http://nodejs.org/api/ Node.js 中文文档:http://nodejs.jsbin.cn/api/ Express ...
- JS循环汇总
JS循环汇总 一.总结 一句话总结:js中的循环主要有while.for.for...in.for...of,循环是,要区别不同的循环对象,比如对象,数组,集合等 while for for...in ...
- 微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
- 调用手机端硬件功能 汇总(android/ios) Native.js示例汇总
Native.js示例汇总 NJS Native.JS 示例 Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成.这篇帖子的目的就是汇总各种写好的NJS代码,方便w ...
- 前端Js框架汇总(工具多看)
前端Js框架汇总(工具多看) 一.总结 一句话总结: 二.前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领 ...
- node.js使用汇总贴
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉..NET程序员初用node.js最需要适应的就是异步开发,以及弱类型语言难以避免的拼写错误与弱小的语法提示 ...
- Native.js示例汇总
Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成.这篇帖子的目的就是汇总各种写好的NJS代码,方便web开发者.众人拾柴火焰高,有能力的开发者多多提交NJS代码, ...
- linq to js使用汇总
用途:方便js操作查询json数据. 下载网址:http://jslinq.codeplex.com/ 使用方法:只需要引用linq.js即可. 查询方法: 一.where查询 var myList ...
随机推荐
- sql2008 表名为全数字时查询报错
今天遇到个很奇葩的问题,在写一个应用程序时需要查询表的数据,但是表名是全数字的,直接查询会报错,于是想到给111的表名加一对中括号:即——>select * from [111] 刚开始还是报错 ...
- Linux下Ruby开发配置
以CentOS为例 安装ruby:yum install ruby 安装ruby devel:yum install ruby-devel,这个装上以后,就可以使用gem安装第三方模块了 安装gem, ...
- ★Java多线程编程总结 系列 转
下面是Java线程系列博文的一个编目: Java线程:概念与原理 Java线程:创建与启动 Java线程:线程栈模型与线程的变量 Java线程:线程状态的转换 Java线程:线程的同步与锁 Jav ...
- C++ do{...}while(0)的好处
在开源软件里面经常可以看到这样的写法. #define X(a) do { f1(a); f2(a); } while(0) 1. 主要作用是放在宏定义里面,避免宏带来的语法问题. 比如 #defin ...
- Http-Only Cookie
设置Cookie的时候,如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送. S ...
- C#日常总结1
Rows:行的集合: Columns:列的集合: Gridview:用来显示数据的表格{ //设置 AutoGenerateColumns="false":表示不允许自动产生列,列 ...
- java环境变量设定
1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0 ...
- 20150514Linux下rpm包安装错误及解决方案
(1)用rpm -ivh ***.rpm解压RedHat自带boost出现错误如下: warning: /media/RHEL_6.3 i386 Disc 1/Packages/boost-1.41. ...
- windows docker安装方式的比较小结
稍微小结一下使用InstallDocker 和dockertoolbox的两种方式安装的docker(名称说明可能不妥,仅代表安装方式) InstallDocker 使用的是Microsoft Hy ...
- ddl dml dcl
DCL数据控制语言 创建临时表空间 create temporary tablespace user_temp tempfile 'E:/oracle/product/10.1.0/oradata/o ...