우리 앱의 간단한 웹 사이트를 위해 전화의 png 모형 안에 간단한 jQuery 슬라이드 쇼를 넣으려고합니다. 부트 스트랩을 사용하고 있으며 점보트론을 두 개의 열로 분할했습니다. 왼쪽에는 페이딩 스크린 샷이있는 모형 전화가 있고 오른쪽에는 로고와 설명이 포함되어 있습니다. 이 슬라이드 쇼를 사용 하고 있습니다.
다음은 내가 HTML에 대해 가지고있는 것입니다.
<body>
<div class="container">
<div class="jumbotron text-center">
<div class="row">
<!-- Slideshow Left -->
<div class="col-md-6">
<div class="fadein">
<img src="img/screenshot1.jpg">
<img src="img/screenshot2.jpg">
<img src="img/screenshot3.jpg">
</div>
<div class="phone">
<img src="img/phone.png">
</div>
</div>
<!-- Description Right -->
<div class="col-md-6">
<h1>√oots</h1>
<p>This is some shit about the game.</p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Slideshow plugin -->
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
4000);
});
</script>
</body>
그리고 여기에 CSS가 있습니다
.jumbotron {
height: 600px;
}
.container {
padding-top: 65px;
}
.fadein {
position:relative;
width:500px;
height:332px;
}
.fadein img {
position:absolute;
left:0;
top:0;
}
나는 수색하고 수색했고 내가 말할 수있는 것은 CSS를 사용하여 절대 대 상대에 대해 무언가를해야한다는 것입니다. 나는 또한이 사이트가 부트 스트랩의 반응 형 기능을 활용하기를 원했지만, 그 슬라이드 쇼가 그렇게하기 위해서는 특별한 작업이 필요하다는 것을 알 수 있습니다. 내가 사용한 모든 것이 우스꽝스럽고 더 나은 방법을 알고 있습니까?
다음은 나중에 레이아웃을 변경하기로 결정한 경우 처리하기 쉬운 깨끗한 솔루션입니다. 전화기의 컨테이너를 이동하기 만하면 다른 모든 항목의 위치를 변경하지 않고도 내부의 화면 내용도 이동할 수 있기 때문에 더 쉽습니다. 주로 전화 클래스를 슬라이드 쇼의 컨테이너로 만들고 img태그 를 사용하는 대신 전화 모형을 전화 클래스의 BG로 만들었습니다 . 그런 다음 음수 z-index값을 추가 하여 화면 내용이 전화기에 잘 맞도록했습니다.
(모형의 화면과 동일한 크기로 이미지를 가져 오므로 아무것도 자르지 않는 것이 좋습니다).
**CSS**
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.jumbotron {
height: 600px;
}
.container {
padding-top: 65px;
}
.fadein {
position:relative;
width:311px;
height:480px;
top: 40px;
z-index: -1; /* Important. */
}
.fadein img {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
opacity: 0.5;
}
.phone {
width: 311px;
height: 573px;
background-image: url('http://www.smoothsand.com/gradeply/images/mockup%20galaxy%20nexus.png'); /* Important. */
}
이것은 작동합니다. 바이올린을 확인하십시오. 도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다