반응형 웹사이트를 제작중입니다.
타 사이트에 소스를 퍼왔습니다.
하지만 홈페이지를 열었을때 비주얼이 보이지 않습니다만 화면을 줄였다 키웠다 하거나 전체화면을 풀었다 했다. 즉 화면의 사이즈가 변하면 비주얼이 나옵니다. 어떻게 해야 할지몰라서 조언부탁드립니다.
Copy
<div id="spot_main"> <div id="slider_t1"> <ul class="lst_slide"> <li class="n1"> <div class="img"><img src="../img/main/spot1.jpg" alt=""></div> <div class="cont"> <h1>WEB/MOBILE</h1> <div class="lst"> <p>Strategy</p> <p>Design UI .UX</p> <p>Program Custom Solution</p> <p>APP(Application Program)</p> <p>Responsive Web</p> <p>Parallax</p> <a href="index_cont1.asp" class="more">MORE</a> </div> </div> </a> </li> <li class="n2"> <div class="img"><img src="/img/main/spot3.jpg" alt=""></div> <div class="cont"> <h1>SI SOLUTION</h1> <div class="lst"> <p>공공SI 서비스구축</p> <p>맞춤형 비즈니스 모델 개발</p> <p>-웹/모바일 서비스 구축</p> <p>-전자정부 프레임워크 기반 구축</p> <p>-정보포털 서비스 구축</p> <p>-포인트통합관리 프로그램</p> <p>-쇼핑몰, 폐쇠몰, 웹진, 이메일</p> <p>-특허관리, 예약관리</p> <p>-CMS</p> <a href="index_cont3.asp" class="more">MORE</a> </div> </div> </li> <li class="n3"> <div class="img"><img src="/img/main/spot2.jpg" alt=""></div> <div class="cont"> <h1>MAINTENANCE</h1> <div class="lst"> <p>SEO(search engine optimization)</p> <p>Design upgrade</p> <p>Publishing homeostasis</p> <p>Security Check</p> <p>Promotion</p> <a href="index_cont2.asp" class="more">MORE</a> </div> </div> </li> <li class="n4"> <div class="img"><img src="/img/main/spot4.jpg" alt=""></div> <div class="cont"> <h1>SYSTEM HOSTING</h1> <div class="lst"> <p>Ser Maintenance</p> <p>Web Hosting</p> <p>Co-Location</p> <p>Server Hosting</p> <p>Cloud Hosting</p> <p>Domain.Mail</p> <a href="index_cont4.asp" class="more">MORE</a> </div> </div> </li> </ul> </div> <div class="down"> <a href="#main_product"> <!-- <span>SCROLL DOWN</span>!--> <span class="after"></span> </a> </div><!-- //down --> </div> <!-- <span class="img on" data-stellar-ratio="-0.05" data-stellar-vertical-offset="-50"><img src="/images/main/spot4.jpg" alt=""></span> <span class="img" data-stellar-ratio="-0.05" data-stellar-vertical-offset="-50"><img src="/images/main/spot5.jpg" alt=""></span> <span class="img" data-stellar-ratio="-0.05" data-stellar-vertical-offset="-50"><img src="/images/main/spot6.jpg" alt=""></span> <div class="bg_cover"></div> <span class="txt" data-stellar-ratio="0.45" data-stellar-vertical-offset="20"><img src="/images/main/p2_oktomato.png" alt="We must think about tomorrow than today. Offers a little newer and extraordinary service."></span> --> <div class="main_notice"> <!-- <h3><img src="main_notice_title.png" alt="News&Notice" /></h3> --> <!-- <input class="prev" type="image" src="main_btn_prev.png" alt="이전으로" /> <input class="next" type="image" src="main_btn_next.png" alt="다음으로" /> --> <div class="main_notice_list"> <ul> <li class="n0"><a href="#" >지역 농산물 직거래 스마트 제휴푸드 시스템 구축 </a></li> <li class="n1"><a href="#" >스마트미디어센터</a></li> <li class="n2"><a href="#" >서울시 서울길 운영관리</a></li> <li class="n3"><a href="#" >대검찰청 검찰방송 </a></li> <li class="n4"><a href="#" >보건복지부 저출산고령사회위원회</a></li> <li class="n5"><a href="#" >문화관광체육부 아시아문화중심도시</a></li> <li class="n6"><a href="#" >AKmall TagOn e-commerce </a></li> <li class="n7"><a href="#" >풀무원 회원전용 폐쇄몰 그린체 오픈</a></li> <li class="n8"><a href="#" >국립암센터 특허관리정보시스템 고도화 작업</a></li> <li class="n9"><a href="#" >한국과학창의재단 무한상상정보넷 고도화 작업</a></li> <li class="n10"><a href="#" >뉴스1 반려동물 포탈 “해피펫” 웹사이트 구축 프로젝트</a></li> <li class="n11"><a href="#" >2015 ICT 어워드코리아 모바일 부분 미래창조과학부장관상 대상</a></li> <li class="n12"><a href="#" >2015 ICT 어워드코리아 UI/UX 부분 한국정보화진흥원장상 금상</a></li> <li class="n13"><a href="#" >인터플렉스 웹사이트 리빌딩 오픈</a></li> <li class="n14"><a href="#" >풀무원 그린체 리빌딩 프로젝트 </a></li> <li class="n15"><a href="#" >이마트 에브리데이 유지보수 계약 체결</a></li> <li class="n16"><a href="#" >트리니티CC 유지보수 계약 체결</a></li> <li class="n17"><a href="#" >한진화학 웹사이트 오픈</a></li> <li class="n18"><a href="#" >LG 생명과학 그로스차트 프로그램 개발 </a></li> <li class="n19"><a href="#" >머니투데이 아트원 웹사이트 오픈 </a></li> <li class="n20"><a href="#" >신세계건설 자유CC 웹사이트 리빌딩 </a></li> <!-- <li><a href="#"><대구>지역수출기업 해외규격인증획득지원사업1...</a></li> <li><a href="#"><대구>학교종이 땡땡땡2...</a></li> <li><a href="#"><대구>학교종이 땡땡땡3...</a></li> <li><a href="#"><대구>학교종이 땡땡땡4...</a></li> --> </ul> </div> </div><!--main_notice--> </div><!-- //spot_main --></div><!-- //wrap --><style> </style> <script type="text/javascript"> var bxSliderSpot = $('#slider_t1 > ul').bxSlider({ // pager: true, // pagerType:'full', // autoHidePager: true,}); var openWidth = 37;var closeWidth = 21;var normalWidth = 25;var spotSpeed = 300;var spotEase = "swing"var slideReload = true;var slideDestroy = true; var PosResetNum = [0,normalWidth+"%",(normalWidth*2)+"%",(normalWidth*3)+"%"]var widthNum = [ [openWidth+"%", closeWidth+"%", closeWidth+"%", closeWidth+"%"], [closeWidth+"%", openWidth+"%", closeWidth+"%", closeWidth+"%"], [closeWidth+"%", closeWidth+"%", openWidth+"%", closeWidth+"%"], [closeWidth+"%", closeWidth+"%", closeWidth+"%", openWidth+"%"]]var PosNum = [ ["0%",openWidth+"%",(openWidth + closeWidth)+"%",(openWidth + (closeWidth*2))+"%"], ["0%",closeWidth+"%",(openWidth + closeWidth)+"%",(openWidth + (closeWidth*2))+"%"], ["0%",closeWidth+"%",(closeWidth*2)+"%",(openWidth + (closeWidth*2))+"%"], ["0%",closeWidth+"%",(closeWidth*2)+"%",(closeWidth*3)+"%"]]// $("#slider_t1 ul.lst_slide > li").on("click",function(){// var url =$(this).find(".more").attr("href");// $(location).attr("href",url);// }); function sliderT1Height(b){ var WinWdith = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; function resizeT1(){ var winHeight = $(window).height(); var headerHeight = $("#header").outerHeight(); var totalHeight = winHeight - headerHeight; if(WinWdith > 1100){ if(slideDestroy){ bxSliderSpot.destroySlider(); slideReload = true; slideDestroy = false; $("#slider_t1 > ul > li").off("mouseenter mouseleave").on("mouseenter mouseleave",sliderEnter).trigger("mouseleave"); } $("#spot_main ,#slider_t1 > ul").css("height",totalHeight); $("#slider_t1 > ul > li").each(function(){ var $this = $(this); $this.find(".img").css({ marginLeft : -($this.find(".img > img").width()/2) }); }); }else{ //WinWdith if(slideReload){ bxSliderSpot.reloadSlider(); slideReload = false; slideDestroy = true; $("#slider_t1 ul.lst_slide > li").off("mouseenter mouseleave",sliderEnter); } $("#spot_main ,#slider_t1 ul.lst_slide,#slider_t1 ul.lst_slide li, #spot_main .bx-viewport").css("height",totalHeight); $("#slider_t1 ul.lst_slide li").each(function(){ var $this = $(this); $this.css({ "left":"","height":$this.find(".img > img").height() }).find(".img").css({marginLeft : -($this.find(".img > img").width()/2)}).end() .find(".cont").css("margin-top",""); }); } //if :: WinWdith }//resizeT1 if (b) { $("#spot_main").imagesLoaded(function(){ resizeT1(true); }) }else{ resizeT1(true); }//if::b } function sliderEnter(e){ if(e.type == "mouseenter"){ var $this = $(this); var num = $this.index(); var cont = $this.find(".cont"); var lstHeight = cont.find(".lst").outerHeight(); cont.find(".lst").stop().fadeIn(300); cont.find("h1").css({"width":"70%"}); cont.stop().animate({"margin-top":-(lstHeight / 2)},300); for (var i = 0; i < $("#slider_t1 > ul > li").length; i++) { $("#slider_t1 > ul > li:eq("+i+")").stop().animate({ "width":widthNum[num][i], "left":PosNum[num][i] },spotSpeed,spotEase) }; }else{ var $this = $(this); var num = $this.index(); var cont = $this.find(".cont"); $this.find(".lst").stop().fadeOut(300); cont.stop().animate({"margin-top":-20},300); cont.find("h1").stop().css({"width":""}); for (var i = 0; i < $("#slider_t1 > ul > li").length; i++) { $("#slider_t1 > ul > li:eq("+i+")").stop().animate({ "width":normalWidth+"%", "left":PosResetNum[i] },spotSpeed,spotEase) }; } } $(window).resize(function(){ sliderT1Height(false); }); sliderT1Height(true); if( isie7 || isie8 ){}else{ if(!Modernizr.touch){ // $( window ).stellar({ // positionProperty :"transform" // // hideDistantElements: false, // // horizontalScrolling: false, // // responsive: true // }); }};// var stellarTimeout;// $(window).resize(function() {// clearInterval(stellarTimeout);// stellarTimeout = setTimeout(function(){// $( window ).stellar('refresh');// },300); // }); var notice_list = $(".main_notice_list"); var notice_interval; var detail ={ speed:1000, l_height:15, delay:4000, easing:"easeInCubic" } function notice_motion(c,p){ if(c == "next"){ notice_list.find("ul").stop().animate({"top":-(detail.l_height)},detail.speed,detail.easing,function(){ $(this).find("li:first-child").clone().insertAfter($(this).find("li:last-child")) $(this).find("li:first-child").remove().end().css("top",0); }) }else{ notice_list.find("ul li:last-child").clone().insertBefore(notice_list.find("ul li:first-child")).parent().css({"top":-(detail.l_height)}); notice_list.find("ul").stop().animate({"top":0},detail.speed,detail.easing,function(){ $(this).find("li:last-child").remove(); }) } $(".main_notice_list > ul > li").off("click").on("click",noticeClick); }//motion function notice_run(){ notice_interval = setInterval(notice_motion_setintervarl,detail.delay); }//run function notice_stop(){clearInterval(notice_interval); }//stop function notice_motion_setintervarl(){ notice_motion("next"); }//interval /*$(".main_notice .prev,.main_notice .next").click(function(e){ var ac = $(this).attr("class"); notice_motion(ac); }).parent().hover(function(){ notice_stop(); },function(){ notice_run(); });*/ $(".main_visual ul li").hover(function(){ var $m_tab = $(this).find("img"); $m_tab.attr("src",$m_tab.attr("src").split("_off").join("_on")); },function(){ var $m_tab = $(this).find("img"); $m_tab.attr("src",$m_tab.attr("src").split("_on").join("_off")); }) notice_run(); </script>
|
답변 1개
답변을 작성하려면 로그인이 필요합니다.