채택완료

이미지마퀴 처럼 겔러리 최근글을 움직이는 소스 구할 수 없을까요?

2016-02-05 (금) 17:14:37 5,498

http://blsclinic2.com/

위 사이트 상단에 사람이 흐르는 이미지처럼.

겔러리 최근글을 저렇게 흘러 가도록 하는...

소스를 좀 구할 수 없을까요?

부탁드립니다. ㅠㅠ 

답변 1개 / 댓글 1개

채택된 답변
+20 포인트

페이지에 소스 다 나와있는데요 ㅜㅜ

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개

저소스대로 사용할건 아니구요. 저런 형식으로 적용된 skin이 있나 싶어서요 ㅠ

답변을 작성하려면 로그인이 필요합니다.