Jquery 작성자 John Resig가 직접 캡슐화한 javascript 공통 함수_javascript 기술

WBOY
풀어 주다: 2016-05-16 18:42:08
원래의
867명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

//요소의 스타일 값을 가져옵니다.
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name]
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getCompulatedStyle){
name=name.replace(/([A-Z])/g,”-$1″); >name=name.toLowerCase();
var s=document.defaultView.getCompulatedStyle(elem,"")
return s&&s.getPropertyValue(name);
}else{
return null
}
}
//이 페이지를 기준으로 요소의 x 및 y 좌표를 가져옵니다.
function pageX(elem){
return elem.offsetParent?(elem.offsetLeft pageX(elem.offsetParent)):elem.offsetLeft
}
function pageY(elem){
return elem.offsetParent?(elem.offsetTop pageY(elem.offsetParent)):elem.offsetTop;
}
//상위 요소를 기준으로 요소의 x 및 y 좌표를 가져옵니다.
function parentX(elem){
return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode)
}
function parentY(elem) {
return elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}
//다음을 사용하여 위치가 지정된 요소의 x 및 y 좌표를 가져옵니다. CSS .
function posX(elem){
return parsInt(getStyle(elem,”left”))
}
function posY(elem){
returnparseInt(getStyle(elem,”top) ”));
}
//요소 위치를 설정합니다.
함수 setX(elem,pos){
elem.style.left=pos ”px”
}
함수 setY(elem,pos){
elem.style.top=pos "px";
}
//요소의 X 및 y 좌표를 늘립니다.
function addX(elem,pos){
set(elem,(posX(elem) pos))
}
function addY(elem,pos){
set(elem,( posY(elem) pos));
}
//크기를 제어하기 위해 CSS를 사용하여 요소의 높이와 너비를 가져옵니다.
function getHeight(elem){
returnparseInt(getStyle(elem, "height") );
}
function getWidth(elem){
return parsInt(getStyle(elem,"width"))
}
//요소 가져오기 가능, 전체 높이 및 너비
function getFullHeight(elem){
if(getStyle(elem,”display”)!=”none”){
return getHeight(elem)||elem.offsetHeight
}else; {
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”})
var h=elem.clientHeight||getHeight(elem); >restoreCss( elem,old);
return h;
}
}
function getFullWidth(elem){
if(getStyle(elem,”display”)!=”none”) {
return getWidth(elem)||elem.offsetWidth;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”} );
var w=elem.clientWidth||getWidth(elem);
restoreCss(elem,old);
return w; 이전 CSS 저장
function ResetCss(elem,prop){
var old={}
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function RestoreCss(elem,prop){
for(var i in prop) {
elem.style[i]=prop[i];
}
}
//표시 및 숨기기
함수 show(elem){
elem.style.display= elem.$oldDisplay||” “;
}
function hide(elem){
var curDisplay=getStyle(elem,”display”)
if(curDisplay!=”none”)
elem.$oldDisplay=curDisplay;
elem.style.display=”none”
}
}
//투명도 설정
function setOpacity(elem,num){
if(elem.filters){
elem.style.filter=”alpha(opacity=” num ”)”
}else{
elem.style.opacity=num/100; >}
}
//Slide
function SlideDown(elem){
var h=getFullHeight(elem);
elem.style.height=”0px”
show( elem) ;
for(var i=0;i<=100;i =5){
new function(){
var pos=i
setTimeout(function(){elem. style.height=(pos/100*h) ”px”;},(pos*10))
}
}
}
//Gradient
function fadeIn(elem) {
show(elem);
setOpacity(elem,0)
for(var i=0;i<=100;i =5){
새 함수(){
var pos =i;
setTimeout(function(){setOpacity(elem,pos);},(pos 1)*10)
}
}
//가져오기 전체 페이지에서 마우스 커서의 상대 위치입니다.
function getX(e){
e=e||window.event;
return e.pageX||e.clientX document.body.scrollLeft;
}
function getY(e ){
e=e||window.event;
return e.pageY||e.clientY document.body.scrollTop;
}
//마우스 커서의 위치를 ​​가져옵니다. 현재 요소 .
function getElementX(e){
return (e&&e.layerX)||window.event.offsetX
}
function getElementY(e){
return (e&&e.layerY)|| window.event.offsetY;
}
//페이지 높이와 너비 가져오기
function getPageHeight(){
var de=document.documentElement
return document.body.scrollHeight; || (de&&de.scrollHeight)
function getPageWidth(){
var de=document.documentElement;
return document.body.scrollWidth||(de&&de.scrollWidth); }
//스크롤 막대의 위치를 ​​가져옵니다.
function scrollX(){
var de=document.documentElement;
return self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
function scrollY(){
var de=document.documentElement;
return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}
//获取视口의 높이와 크기.
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth;
}
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿