

選択した画像をファンシーボックスのように下に拡大して表示するスクリプトをかいていて  
順に一つ目、二つ目・・・とクリックしていくときには問題ないのですが  
順番をランダムに選択すると若い順でしか動きません。  
問題はaddClassかz-indexかliの特性なのかわかりませんが  
どなたか原因を教えく下さると助かります。

追伸：こちらの使い方がまた十分にわかっておりませんので見にくいかと思いますがご容赦ください。

[code]

    <!DOCTYPE htm>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <body>
    <div id="wrap">
     <div id="pics">
     <ul>
      <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
     </ul>
     </div>
    
    <div id="slider"></div>
    
    <div id="d_none">
     <ul>
      <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
      <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
     </ul>
     </div>
    </div>
    </body>
    </html>
    
[/code]

スタイルシートです

[code]

    <style type="text/css">
    #wrap{      width:500px;}
    #pics{      background:#333; width:500px; height:130px; padding:20px; border:1px solid #ccc; overflow:hidden; position:relative;}
    #slider{    margin:20px;}
    #pics ul{   position:absolute; width:1560px; list-style-type:none; margin:0;left:0; top:20px;}
    #pics ul li{    display:inline;}
    #pics ul li a{  display:block; float:left; margin:5px; transition:all 0.5s ease;}
    
    .big{       transform:scale(3); z-index;100; position:absolute; top:350; left:200;}
    #d_none ul{  width:1560px; list-style-type:none; margin:100;}
    #d_none ul li a {display:none; float:left; margin:5px; transition:all 0.5s ease;    }   
    </style>
    
[/code]

スライドと拡大させたいJavaです。

[code]

    kekka=0;
    $(function(){
      $("#pics ul li a").mouseup(function(e){
          no=$("#pics ul li a").index(this);        
          $("#d_none ul li a").eq(no).css("display","block").addClass("big");
      });
    
      $("#slider").slider({
        min:0,
        max:130*12-500+20,      
        change:function(e,v){
            //alert(v.value);
            var kekka=v.value*-1;
            $("#pics ul").css("left",kekka);
        }
     });
    
    });
    
[/code]


CC BY-SA 3.0
2015-05-08T10:50:39.223
9953
2015-10-05T14:00:41.700
9422
question
javascript css
CSSのZ-indexかjavascriptのremoveClassか・・・liの特性のせいだとおもうのですが・・・。


z-indexに同じ値を設定すると後に書いている方が上に来るみたいですね。

[z-index プロパティ](http://www.marguerite.jp/Nihongo/WWW/RefCSS/z-index.html)から転記

> ※同じ値の場合は、HTML 文書/XML 文書で後方に記述された要素が前方に記述された要素の上に重なります。

上記とは別の話ですが、今の実装だと一度適用した`big`がそのまま残っているようなので、  
他の画像を選択した時に、現在選択されている要素を元に戻してあげる必要があるのかなと思います。

以下、だいぶ動きが残念ですが少しでも参考になれば。  

[code]

    var kekka = 0;
    var currentObj = null;
    $(function() {
      $("#pics ul li a").mouseup(function(e) {
        no = $("#pics ul li a").index(this);
        var obj = $("#d_none ul li a").eq(no);
        if (obj === currentObj) return;
        if (currentObj != null) {
         currentObj.css("display", "block").removeClass("big");
        }
        obj.css("display", "block").addClass("big");
        currentObj = obj;
      });
    
      $("#slider").slider({
        min: 0,
        max: 130 * 12 - 500 + 20,
        change: function(e, v) {
          //alert(v.value);
          var kekka = v.value * -1;
          $("#pics ul").css("left", kekka);
        }
      });
    });
[/code]

[code]

    #wrap {
      width: 500px;
    }
    
    #pics {
      background: #333;
      width: 500px;
      height: 130px;
      padding: 20px;
      border: 1px solid #ccc;
      overflow: hidden;
      position: relative;
    }
    
    #slider {
      margin: 20px;
    }
    
    #pics ul {
      position: absolute;
      width: 1560px;
      list-style-type: none;
      margin: 0;
      left: 0;
      top: 20px;
    }
    
    #pics ul li {
      display: inline;
    }
    
    #pics ul li a {
      display: block;
      float: left;
      margin: 5px;
      transition: all 0.5s ease;
    }
    
    .big {
      transform: scale(3);
      z-index;
      100;
      position: absolute;
      top: 350;
      left: 200;
    }
    
    #d_none ul {
      width: 1560px;
      list-style-type: none;
      margin: 100;
    }
    
    #d_none ul li a {
      display: none;
      float: left;
      margin: 5px;
      transition: all 0.5s ease;
    }
[/code]

[code]

    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    
    <div id="wrap">
      <div id="pics">
        <ul>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/gender_and_character/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/house_sitting/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/diseases/eye_boogers/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/img/image_training.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/gender_and_character/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/house_sitting/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/diseases/eye_boogers/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/img/image_training.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/gender_and_character/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/house_sitting/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/diseases/eye_boogers/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/img/image_training.jpg" width=120 height=90></a></li>
        </ul>
      </div>
    
      <div id="slider"></div>
    
      <div id="d_none">
        <ul>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/gender_and_character/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/house_sitting/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/diseases/eye_boogers/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/img/image_training.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/gender_and_character/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/house_sitting/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/diseases/eye_boogers/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/img/image_training.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/gender_and_character/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/care/house_sitting/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/diseases/eye_boogers/img/image01.jpg" width=120 height=90></a></li>
          <li><a href="#"><img src="http://www.hills.co.jp/cat/img/image_training.jpg" width=120 height=90></a></li>
        </ul>
      </div>
    </div>
[/code]


CC BY-SA 3.0
2015-05-08T11:21:00.253
9955
2015-05-08T11:21:00.253
3516
9953
answer