채택완료
이미지마퀴 처럼 겔러리 최근글을 움직이는 소스 구할 수 없을까요?
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
BlueAngel
2016-02-05 (금) 20:26:46
페이지에 소스 다 나와있는데요 ㅜㅜ
function init 네요
Copy
$(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); }); */ } });
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.