이미지마퀴 처럼 겔러리 최근글을 움직이는 소스 구할 수 없을까요?
본문
위 사이트 상단에 사람이 흐르는 이미지처럼.
겔러리 최근글을 저렇게 흘러 가도록 하는...
소스를 좀 구할 수 없을까요?
부탁드립니다. ㅠㅠ
답변 1
페이지에 소스 다 나와있는데요 ㅜㅜ
function init 네요
$(function(){
// more -------------------------
/*
$("#b3_container .more").bind({
mouseenter : function(){
$(this).children(".moreTxt").stop().animate({top:-48},500,"easeOutBack");
$(this).children(".bg").stop().animate({backgroundColor:"#f40095"},500,"easeOutCubic");
},
mouseleave : function(){
$(this).children(".moreTxt").stop().animate({top:0},500,"easeInOutQuint");
$(this).children(".bg").stop().animate({backgroundColor:"#fd5bbe"},500,"easeOutCubic");
},
click : function(){
console.log($(this).attr("data-url"));
window.open($(this).attr("data-url"),"_self");
}
});
*/
// more -------------------------
function loadMenuXML(){
$.get("/xml/menu.php?branch=2",null, on_CompleteLoad,"xml");
}
function on_CompleteLoad(xmlInfo){
createMenuItems(xmlInfo);
}
loadMenuXML();
function createMenuItems(xmlInfo){
var $menuItems = $(xmlInfo).find("menuitem");
var strDOM = "";
for(var i=0;i<$menuItems.length;i++){
var $menuItem = $menuItems.eq(i);
strDOM +='<li data-url="'+$menuItem.find("url").text()+'">'
strDOM +=' <img class="photo" src="'+$menuItem.find("img").text()+'">';
strDOM +=' <img class="photo2" src="'+$menuItem.find("over").text()+'">';
strDOM +=' <div class="bg"></div>';
strDOM +=' <img class="view" src="/images/b3/view.png">';
strDOM +='</li>';
}
$("#b3_contents_01").append(strDOM);
init($menuItems.length);
}
function init(num){
$("#b3_contents_wrapper ul li img.photo2").css({opacity:0}); // 오버이미지 감추기
var imgWidth=224;
var containerWidth=(imgWidth+0)*num;
$("#b3_contents_wrapper").css({width:containerWidth*2});
var $clone=$("#b3_contents_01").clone();
$("#b3_contents_wrapper").append($clone);
$clone.css({left:-containerWidth});
$("#b3_contents_wrapper ul").each(function(index,element){
$(this).css({width:containerWidth});
});
var speedX=0;
var speedY=0;
var oldX;
var oldY;
var speed;
var mdx; // 마우스 눌렀을 때
var mux; // 마우스 눌렀다 뗐을 때
var mouseX_arr=new Array();
var myTimer;
var autoTimer;
var zIndex=0;
$("#b3_contents_wrapper ul li").bind({
mouseenter : function(){
$(this).children(".photo2").stop().animate({opacity:1}, 500, "easeOutCubic");
//$(this).children(".bg").stop().animate({opacity:0.3}, 500, "easeOutCubic");
$(this).children(".view").stop().animate({top:194}, 500, "easeOutQuint");
},
mouseleave : function(){
$(this).children(".photo2").stop().animate({opacity:0}, 500, "easeInOutCubic");
//$(this).children(".bg").stop().animate({opacity:0}, 500, "easeInOutCubic");
$(this).children(".view").stop().animate({top:224}, 500, "easeInOutQuint");
},
click : function(){
//console.log($(this).index());
window.open($(this).attr("data-url"),"_self");
}
});
/*
$("#b3_contents_wrapper ul li").mousedown(function(e){
clear_autoSlide();
mdx=e.pageX;
});
$("#b3_contents_wrapper ul li").mouseup(function(e){
mux=e.pageX;
if(mdx==mux){
console.log($(this).attr("data-url"));
window.open($(this).attr("data-url"),"_self");
}else{
//set_autoSlide();
}
});
*/
// 자동슬라이드 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var autoMode=true;
var auto_speed;
var auto_speed_num;
//console.log("version : " + $.browser.version)
if($.browser.mozilla){ // 파이어폭스
//alert("Firefox/ version : " + $.browser.version)
auto_speed_num=1;
}else if($.browser.msie){ // 익스플로러
//alert("Internet Explorer/ version : " + $.browser.version)
var browserVer=$.browser.version;
if(browserVer=="10.0"){
auto_speed_num=1;
}else if(browserVer=="9.0"){
auto_speed_num=1;
}else if(browserVer=="8.0"){
auto_speed_num=3;
}else{
auto_speed_num=1;
}
}else if($.browser.safari){ // 사파리
//alert("Safari/ version : " + $.browser.version)
auto_speed_num=1;
}else if($.browser.chrome){ // 크롬
//alert("chrome/ version : " + $.browser.version)
auto_speed_num=1;
}else if($.browser.opera){ // 오페라
//alert("Opera/ version : " + $.browser.version)
auto_speed_num=1;
}else{
//alert("Unknown")
auto_speed_num=1;
}
$("#b3_contents_wrapper").hover(
function(){
autoMode=false;
},
function(){
autoMode=true;
}
);
$("#b3_contents_wrapper").mousemove(function(e){
/*
if(e.pageX>$(window).width()/2){
auto_speed=-auto_speed_num;
}else{
auto_speed=auto_speed_num;
}
*/
});
auto_speed=-auto_speed_num/2; // auto_speed초기값이 설정되어야 최초 자동진행
function autoSlide(){
if(autoMode){
var pos=$("#b3_contents_wrapper").stop().position().left+auto_speed;
$("#b3_contents_wrapper").css({left:pos});
containerMove();
}
}
function set_autoSlide(){
autoTimer=setInterval(autoSlide,10);
}
function clear_autoSlide(){
clearInterval(autoTimer);
}
set_autoSlide();
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getS(e){
clearInterval(myTimer);
$("#b3_contents_wrapper").stop();
speedX=0;
speedY=0;
oldX=e.pageX;
oldY=e.pageY;
mouseX_arr=new Array();
}
function getPos(e){
speedX=e.pageX-oldX;
oldX=e.pageX;
speed=Math.sqrt((speedX*speedX));
startX=e.pageX;
mouseX_arr.push(startX);
containerMove();
}
function dragEnd(e){
setTimer();
var start=mouseX_arr[mouseX_arr.length-2];
var end=mouseX_arr[mouseX_arr.length-1];
// ?????????? 난제..........
if(speed>3){
speed-=3;
}else{
speed=0;
}
// ?????????? 난제..........
if(start>end){
speed=-speed;
}
//console.log("start="+start+" / end="+end+" / speed="+speed);
if(speed>1||speed<-1){
var pos=$("#b3_contents_wrapper").position().left+(speed*10);
$("#b3_contents_wrapper").stop().animate({left:pos},500,"easeOutQuint",function(){
clearInterval(myTimer);
set_autoSlide();
});
}else{
clearInterval(myTimer);
set_autoSlide();
}
}
function setTimer(){
myTimer=setInterval(containerMove,10);
}
function containerMove(){
if($("#b3_contents_01").offset().left>0){
var pos=$("#b3_contents_01").position().left;
$clone.css({left:pos-containerWidth});
}
if($("#b3_contents_01").offset().left<0){
var pos=$("#b3_contents_01").position().left;
$clone.css({left:pos+containerWidth});
}
if($clone.offset().left>0){
var pos=$clone.position().left;
$("#b3_contents_01").css({left:pos-containerWidth});
}
if($clone.offset().left<0){
var pos=$clone.position().left;
$("#b3_contents_01").css({left:pos+containerWidth});
}
}
// drag 설정
/*
// bar를 드래그할 수 있게 해준다
// x축으로만 움직힐 수 있으며, 범위는 bar의 부모크기만큼만 가능함
$("#b3_contents_wrapper").draggable({axis: 'x'});
$("#b3_contents_wrapper").bind("dragstart", function(event, ui){
getS(event);
});
// drag이벤트를 사용하여 드래그 하는 동안 getPos함수를 호출한다.
$("#b3_contents_wrapper").bind("drag", function(event, ui){
getPos(event);
});
$("#b3_contents_wrapper").bind("dragstop", function(event, ui){
dragEnd(event);
});
*/
}
});
저소스대로 사용할건 아니구요. 저런 형식으로 적용된 skin이 있나 싶어서요 ㅠ
답변을 작성하시기 전에 로그인 해주세요.
