Baidu의 마우스 움직임을 그림 지터 효과로 모방하는 jquery를 기반으로 합니다.

1. 소스파일을 확인해 보니 이 페이지에는 경품 정보가 나와 있지 않은 것을 알고 놀랐습니다. 이는 코드가 다른 페이지에 있다는 결론을 내립니다. 그래서 당연히 프레임 연결 주소라고 여겼습니다. 못 찾았는데 이런 메시지가 떴네요.

코드 복사 코드는 다음과 같습니다.

;

>

이 페이지에서는 div를 task-awards ID로 컨테이너로 사용하고 있는 것을 볼 수 있으니 해당 페이지에서 JS 파일을 클릭하여 task-awards

　2를 찾아보세요. 마지막으로 Huangtian은 이 코드를 base.js에서 찾았습니다. award.html 주소와 아래 위젯/경로가 매핑되어 있는 것을 볼 수 있습니다. 따라서 이 페이지의 전체 경로가 발견되었습니다.

코드 복사 코드는 다음과 같습니다.

function getWidgets(){
var module = {
" task-intro-box":"intro.html"
,"task-awards":"awards.html"
,"task-gongao":"gongao.html"
,"task- 규칙 ":"rule.html"
,"faq":"faq.html"
,"task-gongao":"gongao.html"
};
$.each(modules, function (key,val){
if(G(key) ){
$.get("widget/" val ,function(data){
$(data).appendTo($("# " 키));
});
}
});
}

3. award.html 페이지의 소스 파일을 보시면 이 이미지 효과의 호출을 보실 수 있습니다

코드를 복사하세요. 다음과 같습니다:

$("ul.awards img").each(function(k,img){
new JumpObj(img,10);
$(img). hover(function(){ this.parentNode.parentNode.className="hover"});
$(img.parentNode).click(function(){return false;});//클릭 방지
})
$ ("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""})

4. 그런 다음 js 메서드 JumpObj의 코드를 찾으면 됩니다. base.js에서도 이 메서드를 찾았습니다. 🎜> 코드는 다음과 같습니다.

function JumpObj (elem, range, startFunc, endFunc) { //그림에서 마우스를 위로 움직이는 애니메이션 효과, 지원해 주셔서 감사합니다. var curMax = range ||startFunc = startFunc || function(){}; var drct = 0; init(); init() { elem.style.position = 'relative';active() } 함수 active() { elem.onmouseover = function(e) {if(!drct )jump()} } 함수 deactive () { elem.onmouseover = null }

function jump() {

var t = parsInt(elem.style.top)
if (!drct ) MotionStart()
else {
var nextTop = t - 단계 * drct;
if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop 'px'
else if(nextTop < - curMax) drct = -1;
else {
var nextMax = curMax / 2
if (nextMax < 1) {motionOver();return }
curMax
drct = 1;
}
}
setTimeout(function(){jump()}, 200 / (curMax 3) drct * 3)
}
function MotionStart() {
startFunc.apply(this);
elem.style.top='0';
drct = 1;
}
function MotionOver( ) {
endFunc.apply(this) ;
curMax = 범위;
drct = 0;
elem.style.top = '0'
}
this.jump = 점프;
this.deactive = 비활성화
}


5. 나중에 사용할 때는 다음 단계를 따르세요.
　<1>jquery 패키지 및 base.js 파일 가져오기(JumpObj 메서드 저장)
　<2>페이지 로드 마우스 이동 이벤트 등록 시 JumpObj 메소드


소스코드 패키지 다운로드
호출