문제좀 해결해주세요 ㅠㅠ
관련링크
http://kad.four-1.com/
134회 연결
본문
반응형 웹사이트를 제작중입니다.
타 사이트에 소스를 퍼왔습니다.
하지만 홈페이지를 열었을때 비주얼이 보이지 않습니다만 화면을 줄였다 키웠다 하거나 전체화면을 풀었다 했다. 즉 화면의 사이즈가 변하면 비주얼이 나옵니다. 어떻게 해야 할지몰라서 조언부탁드립니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.
