CSS Z-index or javascript removeClass...I think it's because of li's characteristics...

I'm writing a script that magnifies the selected image like a fancy box. There is no problem when clicking the first and second... in order.
If you select the order at random, it will only move in order of youth.
I don't know if the problem is the property of addClass, z-index, li, but
I would appreciate it if someone could tell me the cause.

PS: I don't know how to use this again, so please forgive me.

<!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>
<divid="wrap">
 <divid="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>

<divid="slider"></div>

<divid="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>

This is a style sheet

<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;}
# picsul {position: absolute; width: 1560px; list-style-type: none; margin:0; left:0; top:20px;}
# pics ulli {display:inline;}
# pics area { display: block; float:left; margin:5px; transition:all 0.5sease;}

.big { transform:scale(3); z-index; 100; position: absolute; top:350; left:200;}
# d_noneul {width:1560px; list-style-type: none; margin:100;}
# d_none area {display:none; float:left; margin:5px; transition:all 0.5sease;}   
</style>

This is the Java you want to slide and zoom in on.

kekka=0;
$(function(){
  $("#picsulia").mouseup(function(e){
      no=$("#picsulia").index(this);        
      $("#d_none area").eq(no).css("display", "block").addClass("big");
  });

  $("# slider").slider({
    min : 0,
    max: 130*12-500+20,      
    change:function(e,v){
        // alert(v.value);
        varkekka=v.value*-1;
        $("#picsul").css("left", kekka);
    }
 });

});

javascript css

2022-09-30 18:03

1 Answers

If you set the same value for z-index, the one that you write later will come up.

Transfer from z-index property

同じ If the value is the same, the elements described in the HTML/XML document overlap the elements described in the front.

On a different note from the above, it seems that the big that I applied once remains as it is, so
When I select another image, I think I need to restore the currently selected element.

I'm sorry about the movement below, but I hope it will be helpful.

varkekka=0;
var currentObj=null;
$(function(){
  $("#picsulia").mouseup(function(e){
    no=$("#picsulia").index(this);
    varobj=$("#d_none area").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);
      varkekka=v.value*-1;
      $("#picsul").css("left", kekka);
    }
  });
});

#wrap{
  width —500px;
}

#pics{
  background: #333;
  width —500px;
  height:130px;
  padding —20px;
  border —1px solid#cc;
  overflow — hidden;
  position:relative;
}

# slider {
  margin —20px;
}

#picsul{
  position:absolute;
  width —1560px;
  list-style-type: none;
  margin:0;
  left:0;
  top —20px;
}

# pic ul li {
  display:inline;
}

#picsulia{
  display:block;
  float:left;
  margin —5px;
  transition —all 0.5ase;
}

.big{
  transform —scale(3);
  z-index;
  100;
  position:absolute;
  top:350;
  left —200;
}

#d_noneul{
  width —1560px;
  list-style-type: none;
  margin —100;
}

# d_none area {
  display: none;
  float:left;
  margin —5px;
  transition —all 0.5ase;
}

<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>

<divid="wrap">
  <divid="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>

  <divid="slider"></div>

  <divid="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>

2022-09-30 18:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656