심플 롤링 배너 검색 결과

해당 글 4건

심플 롤링 배너(생성자 함수) - 단계별 학습 #4

다형성 및 합성을 이용한 심플 롤링 배너 - 단계별 학습 #4 이 글에서는 단계별 #3에 이은 마지막 스텝으로 객체 지향 프로그래밍의 핵심 기능인 다형성과 합성을 활용한 기능 확장 방법에 대해 알아봅니다. 전 단계에서는 롤링 효과가 한가지였으나 여기서는 4가지의 독립적인 롤링 효과를 합성하여 사용해보도록 합니다. HTML 4가지 롤링 효과를 적용하기 위한 다음과 같은 마크업이 있습니다. html CSS css body { margin: 20px auto; width: 700px; } .rolling-banner{ position:relative; float: left; overflow:hidden; border:2px solid #000; width:40%; height:150px; margin: 10p..
Code Lab 9년 전

심플 롤링 배너(생성자 함수) - 단계별 학습 #3

상속을 활용한 심플 롤링 배너 - 단계별 학습 #3 이 글에서는 단계별 학습 #2에 이어 생성자(클래스) 상속을 활용해 기능을 확장하는 방법에 알아봅니다. 그리고 일반적인 롤링 배너의 경우 배너 영역에 마우스가 들어오는 경우에 롤링 효과가 멈추가 마우스가 배너 영역 밖으로 나가는 경우 다시 롤링되는 기능을 가지고 있는데 이 기능을 상속을 통해 좌측 롤링 배너에만 적용하여 구현해 보도록 합니다. HTML & CSS 마크업 및 CSS는 기존에 진행한 단계별 학습 #2와 동일하며 자바스크립트 소스만 알아보도록 하겠습니다. JavaScript javascript $(function () { // 인스턴스 생성 // 롤링 배너 인터벌 3초 지정, 롤링 애니메이션효과 1초 var rolling1 = new Roll..
Code Lab 9년 전

심플 롤링 배너(생성자 함수) - 단계별 학습 #2

심플 롤링 배너 #2 이 포스팅은 단계별 학습 #1에서 진행했던 코드를 리팩토링하여 좀더 확장한 코드를 소개합니다. 마크업 단계별 학습 #1에서는 하나의 롤링배너만을 구현했지만 여기서는 여러개의 배너를 사용할 수 있도록 확장해 보도록합니다. html CSS css .rolling-banner{ position:absolute; overflow:hidden; border:2px solid #000; } .rolling-banner img{ position:absolute; top:0; left:0; width:100%; height:100%; } #banner1 { top:250px; left:50px; width:400px; height:200px; } #banner2 { top:250px; left:5..
Code Lab 9년 전

심플 롤링 배너(생성자 함수) - 단계별 학습 #1

심플 롤링 배너 시작하기 이 포스팅에서는 생성자 함수, 프로토타입을 이용한 심플한 롤링 배너 구현 방법,원리에 대해 단계별 학습 진행해 보도록 합니다. 단계별 학습 중 첫 번째 단계이며 맨 하단의 링크를 통해 단계별 학습을 진행해 보세요. 마크업 html CSS css .rolling-banner{ position:relative; top:100px; left:100px; width:400px; height:200px; overflow:hidden;; border:2px solid #000; } .rolling-banner img{ position:absolute; top:0; left:0; } JavaScrip javascript ion () { // 인스턴스 생성 var rolling1 = new R..
Code Lab 9년 전