이미지 롤링 셔터 효과를 구현하기 위한 Javascript CSS 아이디어 및 코드_javascript 기술
- WBOY원래의
- 2016-05-16 16:33:151555검색
Arcgis를 사용해보신 분들은 Arcmap의 롤러 셔터 효과에 대한 깊은 기억이 있으실 것이고, 이를 자신들의 WebGIS 시스템으로 옮기고 싶어하실 것입니다. 저도 이 비교적 멋진 롤러 셔터를 좋아해서 조사를 해봤습니다. 효과는 하하하 끝났습니다 여러분께 결과를 알려드리겠습니다
이 효과 보고 닭이 조금 움직였나요? 헤헤 걱정하지 말고 천천히 들어보세요.
먼저 컨테이너입니다. 두 개의 DIV를 사용하여 서로 다른 두 기간의 이미지를 표시합니다. 다음으로 두 컨테이너의 스타일을 설정합니다. 코드:
#after{
position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/24.jpg);
width: 940px;
height: 529px;
background-repeat: no-repeat;
}
#before{
position: absolute;
top: 0px;
left: 0px;
border-right: 3px solid #f00;
background-image: url(../images/23.jpg);
width: 433px;
height: 529px;
background-repeat: no-repeat;
max-width: 940px;
}
이런 식으로 이미지가 웹에 표시됩니다.
다음으로 롤링 셔터 효과를 구현합니다. 롤링 셔터를 구현하기 위해 가장 중요한 것은 이전의 너비를 설정하는 것입니다. 설정 방법은 마우스의 위치를 가져오는 것입니다.
function RollImage(evt){
var x=evt.pageX;
console.log(x);
$("#before").css("width",x+"px");
}
/script>
이런 식으로 롤러블라인드의 효과를 얻을 수 있습니다. 소스코드는 다음과 같습니다.
style.css
.beforeafter{
width: 940px;
height: 529px;
}
#after{
position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/24.jpg);
width: 940px;
height: 529px;
background-repeat: no-repeat;
}
#before{
position: absolute;
top: 0px;
left: 0px;
border-right: 3px solid #f00;
background-image: url(../images/23.jpg);
width: 433px;
height: 529px;
background-repeat: no-repeat;
max-width: 940px;
}
테스트.html
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>日本地震灾区前后对比</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<link href="css/roll.css" type="text/css" rel="stylesheet">
<script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function RollImage(evt){
<strong>var x=evt.pageX;
$("#before").css("width",x+"px");</strong>
}
</script>
</head>
<body>
<div class="beforeafter" onmousemove="RollImage(event)">
<div id="after"></div>
<div id="before"> </div>
</div>
</body>
</html>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.