[기타] '삐빠뽀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(https://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(https://optimal.inven.co.kr/upload/2018/12/13/bbs/i14385189953.png)'}}"
data-inven-unselected-css="{'_SELF_':{'background':'url(https://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(https://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(https://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(https://optimal.inven.co.kr/upload/2018/12/13/bbs/i15984186580.png)'}}"
data-inven-unselected-css="{'_SELF_':{'background':'url(https://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(https://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(https://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(https://optimal.inven.co.kr/upload/2018/12/13/bbs/i14385189953.png)'}}"
data-inven-unselected-css="{'_SELF_':{'background':'url(https://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(https://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(https://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(https://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(https://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(https://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="https://optimal.inven.co.kr/upload/2017/09/20/bbs/i15903366033.jpg" style="margin-right:-4px;">
<img src="https://optimal.inven.co.kr/upload/2017/09/20/bbs/i15937440979.jpg">
<img src="https://optimal.inven.co.kr/upload/2017/09/20/bbs/i15966550087.jpg">
<img src="https://optimal.inven.co.kr/upload/2017/09/20/bbs/i15994219107.jpg">
<img src="https://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(https://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(https://upload2.inven.co.kr/upload/2018/12/17/bbs/i14348935127.png);background-repeat: no-repeat;
background-position-x: 0px;">
</div></div>