アプリ版：「スタンプのみでお礼する」機能のリリースについて

jQueryでのgalleryについて

解決済

  • 質問者：bwallace00
  • 質問日時：
  • 回答数：1件

http://sugoude.inuiyosuke.jp/

上記のようなサイトのjQueryのプラグインはないでしょうか？
Google探してますが、スライダーやシンプルなギャラリーはありますがこういった流れるjQueryは
見当たりませんでした。
他の方法でもいいですが、最近jQueryにはまっているため質問させていただきました。

よろしくおねがいします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ご提示のサイトのものはオリジナルのようですね。



＞流れるjQueryは見当たりませんでした。
通常の画像ギャラリー系のものでスライドしてゆくタイプがあるような気がしますが…


原理だけの簡略化したサンプルを作ってみましたので、jquery化などはご自由に。
とはいうものの、それなりの機能があるのであまり短くはなっていませんが、ご参考までに。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#imageBox{
　width:100%; margin-top:200px; position:relative; overflow:hidden;
}
#imageBox ul, #imageBox li{
　list-style-type:none; position:relative; margin:0; padding:0;
}
#imageBox li{
　width:200px; float:left;
}
#imageBox li img{
　width:100%; height:100px; border:1px solid #fff;
}
#imageBox li span{
　font-weight:bold; display:none;
}
//-->
</style>
</head>
<body>

<div id="imageBox">
<ul>
<li>
<a href="#"><img src="img/photo01.jpg" alt="photo01"></a>
<span>画像01<br>photo01</span>
</li>
<li>
<a href="#"><img src="img/photo02.jpg" alt="photo02"></a>
<span>画像02<br>photo02</span>
</li>
<li>
<a href="#"><img src="img/photo03.jpg" alt="photo03"></a>
<span>画像03<br>photo03</span>
</li>
<li>
<a href="#"><img src="img/photo04.jpg" alt="photo04"></a>
<span>画像04<br>photo04</span>
</li>
<li>
<a href="#"><img src="img/photo05.jpg" alt="photo05"></a>
<span>画像05<br>photo05</span>
</li>
</ul>
</div>


<script type="text/javascript">
<!--
(function(addEvent, setOpacity){
　var id　　= "imageBox";

　var rap　 = document.getElementById(id);
　var box　 = rap.getElementsByTagName("ul")[0];
　var units = box.getElementsByTagName("li");
　var unitW = units[0].clientWidth * units.length;
　var animate　= null;
　var interval = 50;
　var left　　 = 0;

　var start = function(){
　　animate = setInterval(function(){
　　　left +=2;
　　　if(left>0) left -= unitW;
　　　box.style.left = left + "px";
　　}, interval);
　}

　var stop = function(){
　　clearInterval(animate);
　}

　var mouseOn = function(img, li){
　　stop();
　　for(var i=0; i<units.length; i++)
　　　if(units[i]!=li) setOpacity(units[i], 40);
　　li.getElementsByTagName("span")[0].style.display = "inline";
　}

　var mouseOut = function(img, li){
　　for(var i=0; i<units.length; i++) setOpacity(units[i], 100);
　　li.getElementsByTagName("span")[0].style.display = "none";
　　start();
　}

　var handler = function(evt){
　　var t = evt.target || evt.srcElement;
　　if(t.nodeName != "IMG") return;
　　var elm = t.parentNode;
　　var li;

　　while(elm && elm!=box){
　　　if(elm.nodeName=="LI") li = elm;
　　　elm = elm.parentNode;
　　}
　　if(elm){
　　　if(evt.type=="mouseover") mouseOn(t, li); else mouseOut(t, li);
　　}
　}

　var setUp = function(){
　　var rapW = rap.clientWidth;
　　var html = box.innerHTML;
　　var w = 0;
　　while(rapW > w){
　　　box.innerHTML += html;
　　　w += unitW;
　　}
　　box.style.width = (w + unitW) + "px";
　　addEvent("mouseover", handler);
　　addEvent("mouseout", handler);
　　start();
　}

　setUp();

}(
//@cc_on
　function(type, func){
　　document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/type, func, false);
　},
　function(e, o){
　　e.style./*@if(1)filter = "alpha(opacity=" + o + ")" @else*/opacity = o/100/*@end@*/;
　}
));

//-->
</script>

</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報