jquery.galleryslider.jsを使って複数画像をマウスカーソル位置によってフルスクリーン縦スライドする方法をご紹介します。
複数画像を縦列に表示しマウスカーソルを上下するとマウスカーソル位置によって画像が上下に縦スライドします。
Contents
ディスプレイ広告
複数画像をマウスカーソル位置によってフルスクリーン縦スライドするCSSの記述例
※複数画像エリア(#gallery)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
background:#ffffff;
height:100%;
width:100%;
}
h1{
font-size:16px;
font-weight:normal;
line-height:2.0em;
text-align:center;
}
#gallery{
position:relative;
margin:0 auto;
cursor:n-resize;
}
#gallery img {
width:100%;
display:block;
}
#gallery span{
position:absolute;
z-index:1;
height:100%;
width:100%;
overflow:hidden;
display:block;
background:url(img/bg.png) repeat;
}
*html #gallery span {
display:none;
} /*hide png ie6*/
-->
</style>
jquery.galleryslider.jsを使って、複数画像をマウスカーソル位置によってフルスクリーン縦スライドするJavaScriptの記述
※jquery.min.js、jquery.galleryslider.jsファイルを読み込みます。$(複数画像エリア).galleryslider({オプション})で複数画像エリアにオプション(幅サイズや複数画像に対する効果)を設定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleryslider.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#gallery').galleryslider({width:"100%", raster:true}); //width in px % or em | raster: true or false
});
</script>
複数画像をマウスカーソル位置によってフルスクリーン縦スライドするHTMLの記述例
<h1>10枚画像をフルスクリーン表示し、縦スライドさせます。</h1>
<div id="gallery">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<img src="img/05.jpg" alt="" />
<img src="img/06.jpg" alt="" />
<img src="img/07.jpg" alt="" />
<img src="img/08.jpg" alt="" />
<img src="img/09.jpg" alt="" />
<img src="img/10.jpg" alt="" />
</div>
jquery.galleryslider:複数画像をフルスクリーンで縦スライドできるデモページ
※マウスカーソルの位置を上下に移動させてみて下さい。
jquery.galleryslider:複数画像をフルスクリーンで縦スライドできるデモページ
ソース元:jQuery Gallery Slider Plugin | Kollermedia.at
ソース元:jQuery Gallery Slider Plugin | Kollermedia.at
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。