이것은 구정에 쓴 JS 스크롤 플러그인의 소스 코드입니다. 결과의 결과에 만족하지 않습니다. 나는 통합으로 돌아가서 JS를 깊이 배웠다. 이 플러그인에는 다음과 같은 불만족스러운 측면이 있습니다.
콘텐츠의 과도한 영향은 최근 QQ 클라이언트의 세션 목록에서 스크롤 바를 참조 할 수 있습니다. 스크롤은 매우 매끄럽고 간단히 말하며 애니메이션 전환 효과가 부족합니다.
완벽한 호환성이 아닌 IE6과 7의 스타일은 여전히 약간 결함이 있습니다.
스크롤 막대가 마우스가 매달려있을 때만 표시되며 제거 후 숨겨진 효과는 쓰여지지 않은 것과 같이 스타일이 불완전합니다.
내부 구조가 혼란스럽고 컨텐츠 구조를 조정해야합니다.
스크롤 바 그림은 결국 아티스트가 아니며, 스스로 사진을 자르는 것은 너무 역겨운 일입니다 ...
전반적으로 여전히 볼 수는 있지만 여전히 애니메이션이 부족합니다. 이 플러그인을 작성했을 때 플러그인이 비교적 기본적인 기능을 사용했다는 것을 깨달았으므로 이러한 기능을 캡슐화해야한다고 생각했습니다. 나는 최근에 JS를 깊이 연구하고 있습니다. 책을 읽은 후이 기본 기능 플러그인을 작성해야합니다. 물론 애니메이션 엔진은 필수 불가결합니다. 더 이상 고민하지 않으면 소스 코드가 여기에 있습니다 (참고 :이 플러그인의 전체 버전에는 사진이 있습니다. 기사 끝의 첨부 파일에서 전체 플러그인을 다운로드하십시오).
CSS
코드 사본은 다음과 같습니다.
.lf_scroll, .lf_scroll li {패딩 : 0; 여백 : 0; 목록 스타일 : 없음; 글꼴 : 14px/24px "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', Sans-Serif; 개요 : 없음; }
.lf_scroll {커서 : 포인터; 너비 : 10px; 위치 : 절대; 오른쪽 : 0; 상단 : 0; 필터 : 알파 (불투명도 = 50); -Moz-opacity : 0.5; -khtml- 볼륨 : 0.5; 불투명도 : 0.5; }
.lf_scrollfocus {필터 : 알파 (불투명 = 100); -Moz-opacity : 1; -khtml-opacity : 1; 불투명도 : 1; }
.lfs_top, .lfs_center, .lfs_bottom {background : url ( 'scrollbar.gif'); 너비 : 10px; 높이 : 10px; }
.lfs_top {배경 위치 : 1px 0px; }
.LFS_CENTER {배경 위치 : 중심 0; 높이 : 100px; }
.LFS_BOTTOM {배경 위치 : -22px 0; }
/*개발자 구성*/
.Rolldiv {높이 : 100%; 너비 : 100%; 오버플로 : 숨겨진; 위치 : 상대; }
자바 스크립트
코드 사본은 다음과 같습니다.
/*
*이 플러그인은 시뮬레이션 웹 페이지 스크롤 막대에 정의되어 있습니다. DOM 이벤트에 바인딩 후 삽입하십시오.
*
* 댓글 버전 : 1.0.0
* 저자 : Linkfly
* Sina : 반세기에 집중 | cnblogs : http://www.cnblogs.com/silin6/ | 이메일 : [email protected]
* 날짜 : 2014-02-05 02:38:35
*
*
* MIT 및 GPL 라이센스에 따라 이중 라이센스 :
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(함수 (창, 정의되지 않은) {
// 구성 매개 변수 정보
var config = {
자동 : 사실,
높이 : '자동',
너비 : '자동'
};
var linkflyscroll = function (dom, 옵션) {
/// <요약>
/// 1 : 시뮬레이션 된 스크롤 바 객체 생성, [이 객체가 작동 한 후 지정된 객체에 이벤트를 바인딩하십시오.
/// 1.1- LinkflyScroll (DOM) - 지정된 DOM에서 스크롤바 객체 생성
/// 1.2- linkflyscroll (dom, 옵션) - 스크롤바 객체를 생성하고 객체 구성을 위해 작업 모델을 사용자 정의 할 수있는 일련의 매개 변수를 제공합니다.
/// </summary>
/// <param name = "dom"type = "string 또는 element">
/// js dom 객체에서 전달되거나 String 유형의 객체 ID
/// </param>
/// <param name = "옵션"type = "json">
/// 다음 옵션 으로이 객체의 작업 모델을 사용자 정의합니다.
/// [선택 사항] 자동 (부울) : 컨텐츠가 컨테이너 높이에 도달하지 않으면 스크롤 막대가 자동으로 숨겨져 있습니까? 기본값은 사실입니다 (예)
/// [선택적] 높이 (int 또는 string) : 기본 장치는 px이며 int 및 string이 될 수 있습니다. 값이 자동 인 경우 CSS의 높이는 기본적으로 사용됩니다.
/// [선택적] 너비 (int 또는 string) : 기본 장치는 px이며 int 및 string이 될 수 있습니다. 값이 자동 인 경우 CSS의 너비는 기본적으로 사용됩니다.
/// </param>
/// <returns type = "linkflyscroll"/>
if (typeof (dom) === 'String') {
dom = document.getElementById (dom);
}
// DOM이 지정되지 않았으며 유효한 DOM이 발견되지 않았습니다
// linkflyscroll ( ""), linkflyscroll (null), linkflyscroll (정의되지 않은)
if (! dom ||! dom.nodeType)
이것을 반환하십시오;
// 컨테이너 개체를 만듭니다
var scrollobj = document.createElement ( 'div');
// 컨텐츠 객체가 깊게 복제되고 이벤트가 포함되어 있지 않으므로 링크 플라이 스크롤 객체가 작업이 완료 될 때까지 기다려야합니다.
var cloneobj = dom.clonenode (true);
scrollobj.classname = 'rolldiv';
scrollobj.appendchild (cloneobj);
// 페이지의 현재 객체를 교체합니다
dom.parentnode.replacechild (Scrollobj, dom);
새로운 linkflyscroll.prototype.init (scrollobj, 옵션 옵션 : {});
};
linkflyscroll.prototype.init = function (dom, 옵션) {
/// <요약>
// 1 :이 객체는 실제 객체입니다. 특별한 작업 방법은 정적 호출과 링크 플라이 스크롤의 인스턴스화 호출이있을 수 있기 때문입니다.
/// 1.1 -init (dom, 옵션) - 지정된 DOM에서 스크롤바 객체 생성
/// </summary>
/// <param name = "dom"type = "element">
/// 돔 개체
/// </param>
/// <param name = "옵션"type = "json">
/// 다음 옵션 으로이 객체의 작업 모델을 사용자 정의합니다.
/// [선택 사항] 자동 (부울) : 컨텐츠가 컨테이너 높이에 도달하지 않으면 스크롤 막대가 자동으로 숨겨져 있습니까? 기본값은 사실입니다 (예)
/// [선택적] 높이 (int 또는 string) : 기본 장치는 px이며 int 및 string이 될 수 있습니다. 값이 자동 인 경우 CSS의 높이는 기본적으로 사용됩니다.
/// [선택적] 너비 (int 또는 string) : 기본 장치는 px이며 int 및 string이 될 수 있습니다. 값이 자동 인 경우 CSS의 너비는 기본적으로 사용됩니다.
/// </param>
/// <returns type = "linkflyscroll"/>
/*
*이 개체에는 다음 속성이 포함됩니다.
* ISDRAG : 스크롤 바가 드래그되고 있습니까?
* STARTTOP : (작동) 스크롤 바 스크롤링 위치를 시작합니다
* EndTop : (작동) 스크롤 바 엔드 스크롤 위치
* Toplimit : 스크롤 막대의 상단 제한 위치
* TONSTLIMIT : 스크롤 막대 하단의 한계 위치
* 컨텍스트 : 콘텐츠 dom
* Scrollradix : 스크롤 카디널리티
* 대상 : 컨테이너 dom
*/
// 현재이 객체는 환경 에서이 포인터가 자주 변경되는 것을 방지하기 위해 (예 : 바인딩 이벤트시) 현재 객체를 저장하십시오.
var currscroll = this;
// domlement
if (dom.nodeType) {
// 컨테이너 및 컨텐츠 DOM을 저장합니다
currscroll.target = dom;
currscroll.context = dom.firstchild;
// 구성 매개 변수를 병합합니다
currscroll.options = thool.extend (구성, 옵션);
if (currscroll.options.width! == 'auto') {
dom.style.width = Tool.convertValue (currscroll.options.width);
}
if (currscroll.options.height! == 'auto') {
dom.style.height = Tool.convertValue (currscroll.options.height);
}
// 유효한 dom을 찾습니다
while (currscroll.context.nodeType! = 1) {
currscroll.context = currscroll.context.nextsibling;
}
// 스크롤 바 DOM을 만듭니다
currscroll.scrollul = document.createElement ( 'ul');
currscroll.scrollul.classname = 'lf_scroll';
currscroll.scrollul.appendChild (Tool.setClass ( 'li', 'lfs_top'));
Currscroll.scrollul.appendChild (Tool.setClass ( 'li', 'lfs_center'));
Currscroll.scrollul.appendChild (Tool.setClass ( 'li', 'lfs_bottom'));
currscroll.context.style.position = 'Relative';
// 위치 데이터를 읽기 전에 페이지에 존재합니다.
Dom.appendChild (Currscroll.scrollul);
this.change ();
툴.addscrollevent (currscroll.context, function (e) {
// 마우스 휠 바인드 마우스 휠 이벤트, 3px 스크롤 유닛
if (e.wheel> 0) {// 스크롤 휠이 위로 스크롤됩니다
var currtop = currscroll.endtop- = 3;
Currscroll.scrollevent.call (Currscroll, Currtop);
} else {// 스크롤 휠이 아래로 스크롤됩니다
var currtop = currscroll.endtop += 3;
Currscroll.scrollevent.call (Currscroll, Currtop);
}
});
// TODO를 드래그 할 때 금지 된 텍스트가 선택됩니다
// 마우스 아래에서 이벤트를 클릭하면 왼쪽 버튼이 있는지 여부를 결정해야합니다. 현재 마우스 오른쪽 버튼을 클릭하면 TODO 스크롤도 실현됩니다.
공구 .addevent (currscroll.scrollul, 'mousedown', function (e) {
Mousedown.call (Currscroll, E);
});
// 더 나은 사용자 경험을 위해 본문에서 모니터링을 구현하기 위해 이벤트 추가
툴.adevent (document.body, 'mousemove', function (e) {
if (currscroll.isdrag) {
// 현재 마우스 위치를 얻습니다
var position = tool.getMousePos (e);
// 현재 스크롤 막대 상단 위치
var currtop = (currscroll.endtop + position.y -currscroll.starttop);
// 호출은이 포인터 가이 작업 객체를 정확하게 가리키는 것입니다.
Currscroll.scrollevent.call (Currscroll, Currtop);
}
거짓을 반환합니다.
});
// 마우스 릴리스 이벤트를 추가하고 릴리스 이벤트를 정확하게 캡처하려면 신체에서 듣습니다.
툴.adevent (document.body, 'mouseup', function () {
Mouseup.call (Currscroll, []);
});
var mousedown = function (e) {
/// <요약>
// 1 : 마우스 프레스 이벤트
/// 1.1 -Mousedown (E) - 스크롤 바 프레스의 Mousedown 이벤트
/// </summary>
/// <param name = "e"type = "event">
/// 이벤트 객체
/// </param>
/// <returns type = "linkflyscroll"/>
currscroll.isdrag = true;
// 현재 마우스 y 위치를 가져옵니다
currscroll.starttop = thool.getmousepos (e) .y;
공구 .addClass (currscroll.scrollul, 'lf_scrollfocus');
거짓을 반환합니다.
};
var mouseup = function () {
/// <요약>
// 1 : 마우스 릴리스 이벤트
/// 1.1 -Mouseup () - Mouseup () - 스크롤 바에서 스크롤 바 이벤트 릴리스
/// </summary>
/// <returns type = "linkflyscroll"/>
currscroll.isdrag = false;
currscroll.endtop = currscroll.scrollul.style.top? parseint (currscroll.scrollul.style.top) : 0;
Tool.removeClass (currscroll.scrollul, 'lf_scrollfocus');
거짓을 반환합니다.
};
currscroll.scrollevent = function (currtop) {
/// <요약>
// 1 : 스크롤 이벤트 (Core), 스크롤 해야하는 좌표를 전달합니다 (스크롤 바 상단)
/// 1.1 -Scrollevent (Currtop) - 코어 스크롤 이벤트
/// </summary>
/// <param name = "currtop"type = "int">
/// 스크롤 막대 상단의 최상위 값은 컨테이너의 이전 레이어에서 나온 것입니다.
/// </param>
/// <returns type = "void"/>
if (currtop <= currscroll.toplimit || currtop <0) {// 상위 한계
currtop = currscroll.toplimit;
} else if (currtop> = currscroll.bottomlimit) {// 하단 제한
currtop = currscroll.bottomlimit;
}
// 스크롤 바 오프셋 효과
currscroll.scrollul.style.top = currtop + 'px';
var temptop = parseint (currscroll.context.style.top? currscroll.context.style.top : 0);
// 디버그 코드
// document.getElementById ( 'postionInfo'). innerHtml = 'currtop :' + currtop + '스크롤링 카디널리티 :' + currscroll.scrollradix + 'scrolllimit :' + currscroll.bottomlimit + 'endtop :' + currscroll.endtop + 'starttop :'+scroll.starttop + '+scroll.scroll.bottomlimit +'endtop : ' + currscroll.bottomlimit +'endtop : ' + currscroll.bottomlimit. Currtop + "OffsetTop :" + currscroll.scrollul.offsettop + "compute :" + (currtop * currscroll.scrollradix * -1) + 'px';
// 텍스트 코드
// 컨텐츠 스크롤링 : 현재 스크롤 막대 상단* 카디널리티는 음수를 차지합니다.
currscroll.context.style.top = currtop * currscroll.scrollradix * -1 + 'px';
};
Currscroll을 반환합니다.
};
};
linkflyscroll.prototype.init.prototype.change = function () {
/// <요약>
// 1 : 스크롤 막대 내용의 기능 변경 기능
/// 1.1- Change () -이 함수는이 스크롤 바 객체를 새로 고치는 데이터를 나타냅니다. 경우에 따라 컨텐츠의 데이터가 끊임없이 변화하고 있습니다. 이 기능을 호출하여 데이터를 현재 스크롤 바 객체로 새로 고칠 수 있습니다.
/// </summary>
/// <returns type = "linkflyscroll"/>
/*
* LinkFlyScroll에 포함 된 속성은 주로이 기능에서 초기화되거나 재정의됩니다.
* ISDRAG : 스크롤 바가 드래그되고 있습니까?
* STARTTOP : (작동) 스크롤 바 스크롤링 위치를 시작합니다
* EndTop : (작동) 스크롤 바 엔드 스크롤 위치
* Toplimit : 스크롤 막대의 상단 제한 위치
* TONSTLIMIT : 스크롤 막대 하단의 한계 위치
* 컨텍스트 : 콘텐츠 dom
* Scrollradix : 스크롤 카디널리티
* 대상 : 컨테이너 dom
*/
// 일련의 데이터를 재설정하거나 읽습니다
var currscroll = this;
currscroll.isdrag = false,
currscroll.starttop = 0,
currscroll.endtop = (currscroll.scrollul.style.top? parseint (currscroll.scrollul.style.top) : 0),
currscroll.toplimit = currscroll.target.scrolltop,
currscroll.bottomlimit = currscroll.target.clientHeight,
currscroll.scrollradix = 10;
// 스크롤 막대의 높이 얻기 : 컨텐츠 높이* (컨테이너 높이/콘텐츠 높이 = 컨텐츠 백분율로 컨테이너)
var scrollpx = currscroll.target.clientheight * (currscroll.target.clientheight / currscroll.context.offsetheight);
// 스크롤 막대 높이
currscroll.scrollul.childnodes [1] .style.height = scrollpx + 'px';
if (currscroll.context.clientheight <= currscroll.target.clientheight && currscroll.options.auto) {
currscroll.scrollul.style.display = 'none';
} 또 다른 {
currscroll.scrollul.style.display = 'block';
// 스크롤 막대가 표시되면 최대 위치 데이터를 수정하십시오.
currscroll.bottomlimit- = currscroll.scrollul.offsetheight;
}
// 스크롤 막대의 스크롤 카디널리티를 설정합니다 (스크롤 막대는 스크롤 1px 컨텐츠 스크롤 스크롤 픽셀) : (콘텐츠 높이 - 컨테이너 높이 [현재 컨테이너가 하나의 화면에 표시 되었기 때문에])/스크롤 막대 상단 (스크롤 막대가 비어 있고 스크롤 할 수 있습니다).
currscroll.scrollradix = (currscroll.context.offsetheight -currscroll.target.clientheight) / currscroll.bottomlimit;
Currscroll을 반환합니다.
};
linkflyscroll.prototype.init.prototype.roll = function (value) {
/// <요약>
// 1 : 스크롤 바 오프셋 메소드
/// 1.1- 롤 (값) - 스크롤 막대 스크롤 방법
/// </summary>
/// <param name = "value"type = "int">
/// 스크롤 대상의 백분율
/// </param>
/// <returns type = "linkflyscroll"/>
var currscroll = this;
if (typeof (value)! == '번호') {
Currscroll을 반환합니다.
}
var currtop = (currscroll.bottomlimit -currscroll.toplimit) * value / 100;
Currscroll.scrollevent (currtop);
currscroll.endtop = currtop;
Currscroll을 반환합니다.
};
/*
* 도구
*/
var 도구 = {
setClass : 함수 (요소, className) {
/// <요약>
/// 1 : 요소 노드의 클래스 속성 설정
/// 1.1- setClass (요소, className) - 요소 노드의 클래스 속성을 설정합니다. 그러한 노드가없는 경우 노드를 만들고 수정 된 노드 객체를 반환하십시오.
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 문자열을 전달하여 노드를 만듭니다. 그렇지 않으면 노드를 수정하십시오.
/// </param>
/// <param name = "className"type = "String">
/// 클래스 이름
/// </param>
/// <returns type = "element"/>
if (typeof element === 'string') {
요소 = document.createElement (요소);
}
요소 .className = className;
리턴 요소;
},
Hasclass : 함수 (요소, 클래스 이름) {
/// <요약>
// 1 : 요소에 클래스가 있는지 여부를 결정하십시오
/// 1.1 -Hasclass (요소, 클래스 이름) - 요소에 클래스가 있는지 여부, 비즈니스에 예외가 있는지 여부를 결정합니다 (기본적으로 그러한 상황이 발생하지 않음).
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 노드 객체
/// </param>
/// <param name = "className"type = "String">
/// 클래스 이름
/// </param>
/// <returns type = "element"/>
if (! element || element.nodeType! == 1) // 예외를 통과시키고 외부에서 처리가 수행되지 않습니다.
진실을 반환하십시오.
var elementclassName = emeter.className;
if (elementClassName.length <1) {
거짓을 반환합니다.
}
if (elementClassName == className || emplicsName.match (new regexp ( "(^| // s)" + className + "(// s | $)")) {
진실을 반환하십시오.
}
거짓을 반환합니다.
},
AddClass : 함수 (요소, className) {
/// <요약>
/// 1 : [추가] 요소에 대한 클래스
/// 1.1 -AddClass (요소, 클래스 이름) - 요소에 추가하고 수정 된 클래스를 반환합니다.
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 노드 객체
/// </param>
/// <param name = "className"type = "String">
/// 클래스 이름
/// </param>
/// <returns type = "element"/>
if (! thool.hasclass (element, classname)) {
if (element.className.length <1) {
요소 .className = className;
} 또 다른 {
요소 .className + = '' + className;
}
}
리턴 요소;
},
removeClass : 함수 (요소, className) {
/// <요약>
// 1 : 요소의 클래스를 제거합니다
/// 1.1 -AddClass (요소, 클래스 이름) - 요소에 대한 클래스 제거 및 수정 된 클래스를 반환합니다.
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 노드 객체
/// </param>
/// <param name = "className"type = "String">
/// 클래스 이름
/// </param>
/// <returns type = "element"/>
if (Tool.hasclass (element, classname)) {
var reg = new regexp ( "(^| // s)" + className + "(// s | $)");
요소 .className = element.className.replace (reg, '');
}
리턴 요소;
},
CSS : 함수 (요소, 키) {
/// <요약>
/// 1 : 요소 CSS로 지정된 속성 값 가져옵니다.
/// 1.1- CSS (요소, 클래스 이름) - 요소 CSS로 지정된 속성 값 가져옵니다.
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 노드 객체
/// </param>
/// <param name = "key"type = "String">
/// 획득 할 CSS 속성
/// </param>
/// <returns type = "String"/>
반환 요소 .currentStyle? 요소 .currentStyle [key] : document.defaultView.getComputedStyle (element, false) [키];
},
addEver : 함수 (요소, 유형, fn) {
/// <요약>
// 1 : 요소에 이벤트를 추가하십시오
/// 1.1- CSS (요소, 유형, FN) - 요소에 이벤트를 추가하십시오.
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 노드 객체
/// </param>
/// <param name = "type"type = "String">
/// 캐릭터가없는 이벤트 이름을 추가하십시오
/// </param>
/// <param name = "fn"type = "function">
/// 이벤트 객체
/// </param>
/// <returns type = "void"/>
if (element.attachevent) {
요소 [ 'e' + type + fn] = fn;
요소 [type + fn] = function () {요소 [ 'e' + type + fn] (window.event); }
요소 .attachevent ( 'on' + type, element [type + fn]);
} else if (element.addeventListener) {
element.addeventListener (유형, fn, false);
}
},
// removeEvent : 함수 (요소, 유형, fn) {
// /// <요약>
// // 1 : 요소의 이벤트 삭제,이 기능은 사용되지 않았습니다.
// // 1.1- removeEvent (요소, 유형, FN) - 요소의 이벤트 제거
// /// </summary>
// /// <param name = "element"type = "요소 또는 문자열">
// /// 노드 객체
// /// </param>
// /// <param name = "type"type = "String">
// /// 삭제 된 이벤트 이름
// /// </param>
// /// <param name = "key"type = "String">
// /// 기능 이름 삭제 된 이벤트
// /// </param>
// /// <returns type = "void"/>
// if (element.detachevent) {
// emeter.detacheVent ( 'on' + type, element [type + fn]);
// 요소 [type + fn] = null;
//} else if (element.removeEventListener) {
// 요소 .removeEventListener (type, fn, false);
//}
//},
AddScrollevent : 함수 (요소, fn) {
/// <요약>
// 1 : Scrollevent 이벤트를 추가하십시오
/// 1.1- AddScrollevent (요소, FN) - 요소에 스크롤 리벤트 이벤트를 추가합니다 (특별 이벤트, 마우스 휠 스크롤 이벤트 요소)
/// </summary>
/// <param name = "element"type = "요소 또는 문자열">
/// 요소 노드
/// </param>
/// <param name = "fn"type = "function">
/// 이벤트 메소드
/// </param>
/// <returns type = "void"/>
var bindscrollfn = function (e) {
e = e || Window.event;
// 스크롤 휠의 스크롤 방향 판단 : Firefox는 다른 브라우저와 다릅니다.
e.wheel = (e.wheeldelta? e.wheeldelta : -e.detail)> 0? 1 : -1; // 이벤트로 뒤집힌 마우스 휠을 판단하고 1은 위쪽으로, -1은 아래쪽에 있습니다.
// 브라우저의 기본 동작을 차단합니다
if (e.preventDefault) {// ff
e.preventDefault ();
} 또 다른 {
e.returnvalue = false; //즉
}
fn.call (요소, e);
}
if (document.addeventListener) {
// ff
element.addeventListener ( 'dommousescroll', bindscrollfn, false);
// W3C
element.addeventListener ( 'mousewheel', bindscrollfn, false);
} else // 즉
{
요소 .attachevent ( 'onmousewheel', bindscrollfn);
}
},
getEvent : function () {
/// <요약>
// 1 : 이벤트 개체를 얻습니다
/// 1.1- getEvent () - 매개 변수가없는 이벤트 객체 가져 오기, IE 및 FF를 처리합니다.
/// </summary>
/// <returns type = "event"/>
if (document.all) {
반환 창 .Event;
}
func = getevent.caller;
while (func! = null) {
var arg0 = func.arguments [0];
if (arg0) {
if ((arg0.constructor == event || arg0.constructor == mouseevent) || (typeof (arg0) == "object"&& arg0.preventDefault && arg0.stopPropagation) {
리턴 arg0;
}
}
func = func.caller;
}
널 리턴;
},
getMousePos : function (ev) {
/// <요약>
// 1 : 현재 마우스 좌표를받습니다
/// 1.1- getMousePos (EV) - 현재 마우스 좌표, 호환성 처리 및 반환 된 객체 형식을 가져옵니다. {x : 마우스 x 좌표, y : 마우스 Y 좌표}
/// </summary>
/// <param name = "ev"type = "event">
/// 이벤트 이벤트 객체
/// </param>
/// <returns type = "json"/>
if (! ev) {
ev = currscroll.getevent ();
}
if (ev.pagex || ev.pagey) {
반품 {
X : EV.Pagex,
Y : ev.pagey
};
}
if (document.documentElement && document.documentElement.scrolltop) {
반품 {
X : ev.clientx + document.documentElement.scrollleft- document.documentElement.clientleft,
y : ev.clienty + document.documentElement.scrolltop- Document.DocumentElement.ClientTop
};
}
else if (document.body) {
반품 {
X : ev.clientx + document.body.scrollleft- document.body.clientleft,
y : ev.clienty + document.body.scrolltop- document.body.clientTop
};
}
},
확장 : 기능 (Oldobj, NewOBJ) {
/// <요약>
/// 1 : 두 객체를 병합합니다
/// 1.1- Extend (OldoBj, NewOBJ) - 두 개체를 병합하고 병합 된 객체를 반환하여 클론으로 구현하므로 두 객체에 영향을 미치지 않습니다.
/// </summary>
/// <param name = "oldobj"type = "object">
/// 기본 객체로 사용되는 병합 될 객체 A는 새 개체의 동일한 이름의 속성을 기본 개체로 덮어 씁니다.
/// </param>
/// <param name = "newobj"type = "object">
/// 객체 B를 병합합니다
/// </param>
/// <returns type = "Object"/>
var tempobj = 도구 클론 (OldObj);
for (newobj의 var 키) {
if (newobj.hasownproperty (key) &&! tempobj.hasownproperty (key)) {
tempobj [key] = newobj [key];
}
}
반환 tempobj;
},
클론 : 기능 (obj) {
/// <요약>
/// 1 : 물체를 복제합니다
/// 1.1- 클론 (OBJ) - 복제 물체를 복제하고 복제 된 새 물체를 반환하십시오. 물체의 프로토 타입은 복제 된 물체입니다
/// </summary>
/// <param name = "obj"type = "object">
/// 복제 할 객체
/// </param>
/// <returns type = "Object"/>
함수 클론 () {}
클론 .prototype = obj;
var newobj = 새로운 클론 ();
for (newobj의 var 키) {
if (newobj 입력 [key] == "object") {
newobj [key] = Tool.clone (newobj [key]);
}
}
Newobj를 반환합니다.
},
ConvertValue : 함수 (값) {
/// <요약>
// 1 : 값을 유효한 값으로 변환합니다
/// 1.1- convertValue (value) - JSON이 구성한 CSS 값을 유효한 값으로 변환하십시오. 값의 값이 "Auto"가 아닌지 확인하십시오.
/// </summary>
/// <param name = "value"type = "object">
/// 변환 할 값
/// </param>
/// <returns type = "Object"/>
var reg =/^/d+$/g;
if (typeof (value) === '번호'|| reg.test (value)) {
반환 값 + 'px';
} 또 다른
반환 값;
}
};
// 창에 등록합니다
window.linkflyscroll = linkflyscroll;
// 창에 등록합니다
if (! window.so) {
Window.so = {};
}
Window.so.scroll = Window.linkflyscroll;
})(창문);
코드 예제
코드 사본은 다음과 같습니다.
<! 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">
<헤드>
<제목> </title>
<link href = "linkflyscroll/linkflyrollcss.css"rel = "Stylesheet"type = "text/css"/>
<script src = "linkflyscroll/linkflyscroll-1.0.0.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
Window.onload = function () {
var config = {
Auto : True, // 컨텐츠가 컨테이너 높이에 도달하지 않으면 스크롤 바가 자동으로 숨겨 질까요?
높이 : '100', // 스크롤 막대 객체의 작동 높이 (이 높이를 초과하면 스크롤 막대가 표시됩니다)
너비 : '자동'// 스크롤 바 객체 작동 너비
};
var scrollobj = so.scroll ( 'obj', config);
// scrollobj.change (); // 스크롤 바 컨텐츠가 변경되면 스크롤 바 디스플레이를 새로 고침해야합니다.
// scrollobj.roll (value); // 스크롤바를 특정 지점에 배치하면 값은 스크롤 바 객체와 관련된 백분율입니다.
};
</스크립트>
</head>
<body>
<div id = "obj">
<div>
현재, 새로운 "패션 스타일"이 기업 경영 분야에서 떠오르고 있으며, 일부 거대한 회사는 스스로 "줄어들고"더 똑똑하고 민첩한 비즈니스로 변화하고 있습니다. Oracle Software는 고객의 주요 유지 보수 비용을 컨설턴트 및 타사 공급 업체로 점점 더 변화시키고 있음을 이해합니다.
Craig Guarente는“중국에서는 Oracle의 사업의 90% 가이 파트너들을 통해 수행됩니다. 또한 Oracle의 수익을 더욱 발전시키기 위해 Ellison CEO는 하와이에 작은 섬을 구입했습니다.
Guarente는 글로벌 부사장으로서 Oracle의 전략을 잘 알고 있습니다. Guarente는 16 년의 업무 경험을 보유하고 있으며 계약 관리, 소프트웨어 라이센스 관리 및 소프트웨어 감사 분야에서 풍부한 경험을 보유하고 있습니다. 그는 2011 년에 Oracle을 떠난 후 Palisade에 합류했습니다. Palisade에 합류했습니다. Palisade는 Oracle 고객이 소프트웨어 계약, 감사 중재 및 라이센스 "최적화"를 제공하도록 돕는 주요 사업입니다.
Guarente는 Palisade의 사업이 매우 빠르게 발전하고 있다고 말했다. Palisade는 타사 조직으로서 고객이 시장에 가까워지고 사용자의 요구를보다 정확하게 이해할 수 있기 때문에 큰 주문을받을 수 있도록 도와줍니다.
일반적으로 컨설팅 회사는 고객이 고객이 실제 요구와 소프트웨어 자체가 제공 할 수있는 가치를 분류하도록 도와줍니다. Guarente는 실제 작업을 통해 자세한 설명을했습니다. 예를 들어, "새로운 데이터 센터를 구축하거나 새로운 재난 복구 계획을 시작하거나 클라우드에 들어가려면 먼저 계획 맵을 개발하고 최종적으로 계획 맵을 개발하고 최종적으로 사용자의 궁극적 인 목표를 달성하기 위해 구현할 것입니다. 소프트웨어가 많은 서버에서 다른 위치에 배포되면 엔터프라이즈 소프트웨어는 라이센스 키를 얻을 수 있기 때문에 Enterprise는 소프트웨어가 거의 없어 질 수 있습니다. 데이터베이스 관리자는 자동로드 리포지토리 (AWR) 보고서를 통해 데이터베이스 문제를 진단 할 수 있지만 이는 일반적인 것입니다. "
최근 몇 년 동안 소프트웨어 감사 파가 증가함에 따라 많은 회사가 소프트웨어 자산 관리 도구를 설치하여 사용하는 소프트웨어, 지속 가능한 기간 및 회사의 얼마나 많은 사람들이 사용하고 있는지 결정하고 있습니다. 그러나 고위 경영 분석가 Hegedus는 다음과 같이 말했습니다 : "기업 규칙, 특히 Oracle의 제품 응용 프로그램을 정확하게 이해할 수있는 도구는 없으며 사용자가 소프트웨어 규칙을 이해하도록 돕기 위해 전문 타사 조직이 필요합니다."
그렇다면 어떻게 Oracle의 소프트웨어 응용 프로그램을 패치 할 수 있습니까? 마크 허드 (Mark Hurd) 회장은 지난주 엔터프라이즈 애플리케이션이 시작될 때 제 3 자 기관은 서비스 지지자로 정의되어야한다고 회사는 제품 지적 재산권을 구매하기보다는 미래에 무료 패치 수리 및 기타 지원을 얻을 수 있도록해야한다고 말했다. 또한 기업은 컨설턴트를 효과적으로 활용하여 기업이 사용하는 소프트웨어와 계약에 포함시켜야 할 소프트웨어를 이해할 때 비용 관리의 첫 번째 단계를 지원해야합니다. 예측과 추측의 과정에 따라 소프트웨어 공급 업체와 소프트웨어를 맹목적으로 남겨 두지 마십시오.
</div>
</div>
</body>
</html>
위는이 기사의 전체 내용이며 설명은 매우 상세합니다. 나는 당신이 그것을 좋아하기를 바랍니다.