Nacx
2018-12-17 16:03
조회: 852
추천: 0
'삐빠뽀098' 님이 문의주신 스크립트 입니다.인벤 스크립트에 관심을 가져주셔서 감사합니다.
문의하신 내용을 바탕으로 작성된 소스를 전달 드리겠습니다. 일단 상단 버튼의 경우는 문제없이 구현할 수 있습니다. 아래의 소스를 그대로 사용해 주시면 됩니다. 클릭시 하단에 내용이 변경되는 것도 구현할 수 있습니다만, 이 과정 중에서 이전 내용위에 페이드 인 (마우스롤오버라고 적어주신) 되는 효과는 구현할 수 없습니다. postion:absoulte와 z-index를 쓴다면 쉽게 구현하는 방식인데, 해당 CSS 속성은 광고로 악용될 소지가 있어서 차단된 스타일 입니다. 대신 스크롤을 이용할 수 있으니 가장 하단에 스크롤 샘플을 참고해 주세요. 게이지의 경우는 배경 이미지를 하나 더 쓰고 해당 부분을 투명하게 하는 것으로 생각보다 쉽게 구현할 수 있습니다. 마찬가지로 하단에 게이지 샘플을 참고해 주세요. 이외에도 별도로 원하시는 형태가 있거나, 궁금하신점이 있다면 언제든지 글 남겨주세요. 감사합니다. ■ 상단 버튼 샘플 ■ 상단 버튼 샘플의 소스 <div data-inven-tabs data-inven-tab-selected="none"> <div style="text-align:center;"> <div data-inven-tab-for="tab_1" style="width:75px;height:181px;display:inline-block;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i13160199463.png)no-repeat center center/100%;margin:5px;" data-inven-over-css="{'inner_1':{'opacity':'1'}}" data-inven-selected-css="{'_SELF_':{'background':'url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i14385189953.png)'}}" data-inven-unselected-css="{'_SELF_':{'background':'url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i13160199463.png)'}}"> <div data-inven-id="inner_1" style="width:75px;height:181px;display:inline-block;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i14385189953.png)no-repeat center center/100%;transition:0.7s;opacity:0;" data-inven-out-css="{'inner_1':{'opacity':'0'}}"> </div></div> <div data-inven-tab-for="tab_2"style="width:75px;height:181px;display:inline-block;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i14183652519.png)no-repeat center center/100%;margin:5px;" data-inven-over-css="{'inner_2':{'opacity':'1'}}" data-inven-selected-css="{'_SELF_':{'background':'url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i15984186580.png)'}}" data-inven-unselected-css="{'_SELF_':{'background':'url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i14183652519.png)'}}"> <div data-inven-id="inner_2" style="width:75px;height:181px;display:inline-block;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i15984186580.png)no-repeat center center/100%;transition:0.7s;opacity:0;" data-inven-out-css="{'inner_2':{'opacity':'0'}}"> </div></div> <div data-inven-tab-for="tab_3"style="width:75px;height:181px;display:inline-block;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i13160199463.png)no-repeat center center/100%;margin:5px;" data-inven-over-css="{'inner_3':{'opacity':'1'}}" data-inven-selected-css="{'_SELF_':{'background':'url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i14385189953.png)'}}" data-inven-unselected-css="{'_SELF_':{'background':'url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i13160199463.png)'}}"> <div data-inven-id="inner_3" style="width:75px;height:181px;display:inline-block;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i14385189953.png)no-repeat center center/100%;transition:0.7s;opacity:0;" data-inven-out-css="{'inner_3':{'opacity':'0'}}"> </div></div> </div> <div style="width:630px; height:451px;position:relative;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i15283705066.png);"> <div data-inven-tab-id="tab_1" style="width:630px; height:451px;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i15295352502.png);"></div> <div data-inven-tab-id="tab_2" style="width:630px; height:451px;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i13537469117.png);"></div> <div data-inven-tab-id="tab_3" style="width:630px; height:451px;background:url(http://optimal.inven.co.kr/upload/2018/12/13/bbs/i15295352502.png);"></div> </div> </div> ■ 스크롤 방식 샘플 ■ ■ ■ ■ ■ ■ 스크롤 방식 샘플의 소스 <center><div style="width:400px;height:83px;overflow:hidden;border:3px dashed lightgreen;border-radius:10px;overflow:hidden;"> <div style="width:5000px;transition:0.4s;text-align:left;transition-timing-function: ease-in-out;" data-inven-id="top_h"> <img src="http://optimal.inven.co.kr/upload/2017/09/20/bbs/i15903366033.jpg" style="margin-right:-4px;"> <img src="http://optimal.inven.co.kr/upload/2017/09/20/bbs/i15937440979.jpg"> <img src="http://optimal.inven.co.kr/upload/2017/09/20/bbs/i15966550087.jpg"> <img src="http://optimal.inven.co.kr/upload/2017/09/20/bbs/i15994219107.jpg"> <img src="http://optimal.inven.co.kr/upload/2017/09/20/bbs/i15924951882.jpg"> </div></div> <div style="text-align:right;cursor:pointer;margin-right:35px;margin-top:-26px"> <div style="display:inline-block;color:gold;padding:1px;" data-inven-id="hb_1" data-inven-over-css="{'top_h':{'margin-left':'0'},'_SELF_':{'color':'gold'},'hb_2,hb_3,hb_4,hb_5':{'color':'white'}}">■</div> <div style="display:inline-block;color:white;padding:1px;" data-inven-id="hb_2" data-inven-over-css="{'top_h':{'margin-left':'-400'},'_SELF_':{'color':'gold'},'hb_1,hb_3,hb_4,hb_5':{'color':'white'}}">■</div> <div style="display:inline-block;color:white;padding:1px;" data-inven-id="hb_3" data-inven-over-css="{'top_h':{'margin-left':'-800'},'_SELF_':{'color':'gold'},'hb_1,hb_2,hb_4,hb_5':{'color':'white'}}">■</div> <div style="display:inline-block;color:white;padding:1px;" data-inven-id="hb_4" data-inven-over-css="{'top_h':{'margin-left':'-1200'},'_SELF_':{'color':'gold'},'hb_1,hb_2,hb_3,hb_5':{'color':'white'}}">■</div> <div style="display:inline-block;color:white;padding:1px;" data-inven-id="hb_5" data-inven-over-css="{'top_h':{'margin-left':'-1600'},'_SELF_':{'color':'gold'},'hb_1,hb_2,hb_3,hb_4':{'color':'white'}}">■</div> </div> <br><br><br> ■ 게이지 샘플 각 퍼센트를 클릭해 보세요. 0% 25% 50%75% 100% ■ 게이지 샘플의 소스 <span data-inven-click-css="{'bga1':{'background-position-x':'-300px'}}">0%</span> <span data-inven-click-css="{'bga1':{'background-position-x':'-225px'}}">25%</span> <span data-inven-click-css="{'bga1':{'background-position-x':'-150px'}}">50%</span> <span data-inven-click-css="{'bga1':{'background-position-x':'-75px'}}">75%</span> <span data-inven-click-css="{'bga1':{'background-position-x':'0px'}}">100%</span> <div data-inven-id="bga1" style="width:300px;height:200px;background:url(http://upload2.inven.co.kr/upload/2018/12/17/bbs/i14375244045.png);background-repeat: no-repeat; transition:0.5s ease-out;background-color:lightgray;"> <div style="width:300px;height:200px;background:url(http://upload2.inven.co.kr/upload/2018/12/17/bbs/i14348935127.png);background-repeat: no-repeat; background-position-x: 0px;"> </div></div> |