저는 배경 화면 이미지를 만들기 위해 backstretch jQuery 플러그인 http://srobbin.com/blog/jquery-plugins/jquery-backstretch/을 사용하고 있지만, 1 페이지 스크롤 웹 사이트가 있고 활성화 된 컨텐트 div에 따라 배경 이미지를 변경하고 싶습니다.액티브 div를 바꿀 때 뒤틀림 이미지 바꾸기
방향 버튼, 패널을 클릭하고 메뉴에서 링크를 선택하는 등 사이트의 각 패널을 스크롤하는 여러 가지 방법이 있으므로 다른 위치에서이 기능을 호출 할 수 있어야합니다.
현재이 사이트는 CSS 스타일링을 위해 선택된 div에 '활성'클래스를 추가 한 다음 해당 위치로 스크롤합니다. 효과적으로, 경로를 $ .backstretch ("http://lchclearnetgraduates.com/newsite/wp-content/themes/lch_custom/images/LCH-city-1.jpg")로 변경해야합니다. 활성 패널이 변경 될 때 특정 패널 중 하나가 아닌 작은 배열에서 임의의 이미지를 선택하려면 일부 패널의 경우 특정 경로로 배경 이미지를 교체하는 기능을 함께 실행하고 싶습니다.
본능은 switch 문을 사용하는 것이지만 도움을 요청해야합니다.
이
진행중인 사이트입니다 : http://lchclearnetgraduates.com/newsite/그것은 워드 프레스 사이트 및 패널 동적으로 출력, 그래서이 단단하지 코드 수 활성 패널 선택이 현재 작동하고있는 것과 같은 방식으로 ID 및 해시 태그와 관련하여 작업해야합니다.
내 JS 코드는 현재 다음과 같습니다. 저는 JS와는 유능하지 않으므로 아마도이 코드를 정렬하는 데 더 효율적인 방법이있을 것입니다.하지만 현재의 기술 수준으로 인해서 저를 제한하고 있습니다.
제공 할 수있는 도움에 감사드립니다.
jQuery(function($){
$.easing.elasout = function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
};
$.backstretch("http://lchclearnetgraduates.com/newsite/wp-content/themes/lch_custom/images/LCH-city-1.jpg");
$('#content').scrollTo(0);
$.scrollTo(0);
$('.menu a').click(function(e){
e.preventDefault();
var link = e.target;
link.blur();
if(link.title)
$(this).parent().find('span.message').text(link.title);
});
// clicking from menu
$('.menu a').click(function(){
$target = $(this.hash);
$.scrollTo($target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
});
//clicking on a panel
$('.panel').click(function(){
$target = $(this);
$.scrollTo($target, 1000, { easing:'elasout', offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
});
// click on up button
$('#verticals a.up').click(function(){
if ($('div.panel.active').prev('div.panel').length){
$target = $('div.panel.active').prev();
$.scrollTo($target, 500, {offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
// click on down button
$('#verticals a.down').click(function(){
if ($('div.panel.active').next('div.panel').length){
$target = $('div.panel.active').next();
$.scrollTo($target, 500, {offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
// click on right button
$('#horizontals a.right').click(function(){
if ($('div.panel.active').parent().next('div.col').length){
$target = $('div.panel.active').parent().next('div.col').children('div:nth-child(1)');
$.scrollTo($target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
// click on left button
$('#horizontals a.left').click(function(){
if ($('div.panel.active').parent().prev('div.col').length){
$target = $('div.panel.active').parent().prev('div.col').children('div:nth-child(1)');
$.scrollTo($target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
$('div.panel.active').removeClass('active');
$target.addClass('active');
return false;
}
else {
return false;
}
});
$(document).ready(function(){
$('.menu li').hover(
function() {
$('ul', this).slideDown(200);
$('ul', this).parent().addClass('active');
},
function() {
$('ul', this).slideUp(200);
$('ul', this).parent().removeClass('active');
}
);
$('.panel').tinyscrollbar();
$("#key-facts").fadeTransition();
});
});