사용자:Senouis/highlight.vue

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

let message1 = ref(true) // 단일 참조 const object1 = reactive({

 name: '색을 뒤집어라, 컬러닷지!',
 image: 'https://dev.libertygame.work/images/7/73/%EC%BB%AC%EB%9F%AC%EB%8B%B7%EC%A7%80.png',

}) // 객체/배열 참조

const flipper = () => {

 message1.value = !message1.value
 if (message1.value) {
   object1.name = '색을 뒤집어라, 컬러닷지!'
   object1.image =
     'https://dev.libertygame.work/images/7/73/%EC%BB%AC%EB%9F%AC%EB%8B%B7%EC%A7%80.png' // 파일 업로드 후 링크 바꿀 것
   return
 }
 object1.name = '깊은 수렁 속으로 빠지다'
 object1.image =
   'https://dev.libertygame.work/images/8/89/%EA%B9%8A%EC%9D%80_%EC%88%98%EB%A0%81.JPG' // 링크를 찾아 바꿀 것
 return

}

setInterval(flipper, 5000)

const getImageUrl = () => {

 return new URL(`${object1.image}`, import.meta.url).href

} </script>

   <button id="scroll-view-left" class="scroll-button" @click="flipper"><</button>

     <a>
       <img id="image_highlight" :src="require(object1.image)" width="480px" height="180px" />

         <slot>틀:Object1.name</slot>

     </a>

   <button id="scroll-view-right" class="scroll-button" @click="flipper">></button>

</template> <style> /* 모듈 범위 스타일 미지원으로 전역으로 설정 적 */ .scroll-view-wrapper {

 display: inline-flex;
 background-color: transparent;
 vertical-align: bottom;

}

.scroll-button {

 background-color: rgba(249, 249, 249, 0.1);
 border-color: transparent;
 height: 180px;

}

.scroll-button:hover {

 background-color: rgba(211, 211, 211, 0.3);

}

.item {

 margin-top: -1rem;
 margin-left: 1rem;
 margin-right: 1rem;
 text-align: center;
 display: flex;
 flex-direction: column;
 position: relative;

}

.details {

 flex: 1;
 margin-left: 1rem;

}

@media (min-width: 1024px) {

 /* 대화면에서 애니메이션 추가 */
 @keyframes scroll-animation {
   0% {
     transform: translateX(10%);
   }

   20% {
     transform: translate(0%);
   }
   100% {
     transform: translate(0%);
   }
 }

 .item {
   animation-duration: 5s;
   animation-name: scroll-animation;
   animation-iteration-count: infinite;
 }

} </style>