jQuery는 수평 Slider_jquery를 사용하여 포커스 맵 애니메이션 플러그인을 구현합니다.

매우 실용적인 jQuery 포커스 맵 애니메이션 플러그인입니다. 다른 jQuery 포커스 맵 플러그인과 달리 수평 슬라이더가 있으며 슬라이더를 밀거나 그림을 클릭하여 전환할 수 있습니다. 이 포커스 맵은 순수하게 jQuery로 구현되었으며, 호환성과 실용성이 뛰어납니다. 또한 비교적 간단하며 필요한 프로젝트에 쉽게 통합될 수 있습니다.

효과는 다음과 같습니다.

HTML 코드

<div id="wrapper">
<ul id="flip">
<li title="The first image" ><img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy" / alt="jQuery는 수평 Slider_jquery를 사용하여 포커스 맵 애니메이션 플러그인을 구현합니다." ></li>
<li title="A second image" ><img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy" / alt="jQuery는 수평 Slider_jquery를 사용하여 포커스 맵 애니메이션 플러그인을 구현합니다." ></li>
<li title="This is the description" ><img  src="/static/imghwm/default1.png"  data-src="5.png"  class="lazy" / alt="jQuery는 수평 Slider_jquery를 사용하여 포커스 맵 애니메이션 플러그인을 구현합니다." ></li>
<li title="Another description" ><img  src="/static/imghwm/default1.png"  data-src="4.png"  class="lazy" / alt="jQuery는 수평 Slider_jquery를 사용하여 포커스 맵 애니메이션 플러그인을 구현합니다." ></li>
<li title="A title for the image" ><img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy" / alt="jQuery는 수평 Slider_jquery를 사용하여 포커스 맵 애니메이션 플러그인을 구현합니다." ></li>
</ul>
<div id="scrollbar"></div>
</div>

CSS 코드

.ui-jcoverflip {
position: relative;
}
.ui-jcoverflip--item {
position: absolute;
display: block;
}
/* Basic sample CSS */
#flip {
height: 200px;
width: 630px;
margin-bottom: 50px;
}
#flip .ui-jcoverflip--title {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
color: #555;
}
#flip img {
display: block;
border: 0;
outline: none;
}
#flip a {
outline: none;
}
#wrapper {
height: 300px;
width: 630px;
overflow: hidden;
position: relative;
}
.ui-jcoverflip--item {
cursor: pointer;
}
body {
font-family: Arial, sans-serif;
width: 630px;
padding: 0;
margin: 0;
}
ul,
ul li {
margin: 0;
padding: 0;
display: block;
list-style-type: none;
}
#scrollbar {
position: absolute;
left: 20px;
right: 20px;
}

jQuery 코드

jQuery( document ).ready( function(){
jQuery( '#flip' ).jcoverflip({
current: 2,
beforeCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
];
},
afterCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
];
},
currentCss: function( el, container ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
];
},
change: function(event, ui){
jQuery('#scrollbar').slider('value', ui.to*25);
}
});
jQuery('#scrollbar').slider({
value: 50,
stop: function(event, ui) {
if(event.originalEvent) {
var newVal = Math.round(ui.value/25);
jQuery( '#flip' ).jcoverflip( 'current', newVal );
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
});

위 코드는 jQuery에서 수평 슬라이더를 사용하여 포커스 맵 애니메이션 플러그인을 구현하는 코드입니다. 모두에게 도움이 되기를 바랍니다.