Question

我有jquery可排序列表，在每个li中我都有一个带有“onClick”功能的图像，可以将其更改为更大的图像。不幸的是我必须使用绝对位置（对于z-index）所以我很难找到一种方法将图像放在中间（现在当它变为更大的图像而不是坐在中心时，它会在右边增长 - 底部方向）。不，我不能使用左键并在每次缩小时改变它，因为我的列表位置也可能会改变...

好的，所以这是该网站的链接，看看我在说什么：temporar page

<!doctype html>


<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Display as grid</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
    <script src="scripturi.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
    <script src="dulap.js"></script>


  <style>

  .sortable { list-style-type: none; margin: 0; padding: 0; width: 80px; height:300px }
  .sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 350px; height: 120px; text-align: center; }
  .sortable0 { list-style-type: none; margin: 0; padding: 0;   }
  .sortable0 ul { margin: 10px 10px 10px 10px; padding: 1px; float: left; width: 500px; height: 500px; text-align: center; }
  </style>
  <script>
  $(function() {
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
  });
   $(function() {
    $( ".sortable0" ).sortable();
    $( ".sortable0" ).disableSelection();
  });
</script>
</head>

<body>
<ul class="sortable0" id="sortable0">
<ul class="sortable" id="sortable">

<li id="sertar11" style="z-index=10000;alight:center">
<img id="sertar1" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 500; " src="img/sertar1.png">
</li>
 <li id="sertar22" style="z-index=10000;" > 
<img id="sertar2" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 498;aligh:center; " src="img/sertar1.png">
</div>
</li>
 <li id="sertar33" style="z-index=10000" > 
<img id="sertar3" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 496;aligh:center; " src="img/sertar1.png">
</li>
 <li id="sertar44" style="z-index=10000" > 
<img id="sertar4" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 494;aligh:center; " src="img/sertar1.png">
</li>
 <li id="sertar55" style="z-index=10000;align:center" > 
<img id="sertar5" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 492;aligh:center; " src="img/sertar1.png">
</li>
</ul>
 <ul class="sortable" id="sortableColona2">

<li id="sertar111" style="z-index=10000"> 
<img id="sertar11" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 998;aligh:center;" src="img/sertar1.png">
</li>
 <li id="sertar222" style="z-index=10000" > 
<img id="sertar22" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 104;aligh:center;" src="img/sertar1.png">
</div>
</li>
 <li id="sertar333" style="z-index=10000" > 
<img id="sertar33" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 102;aligh:center; " src="img/sertar1.png">
</li>
 <li id="sertar444" style="z-index=10000" > 
<img id="sertar44" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 100;aligh:center; " src="img/sertar1.png">
</li>
 <li id="sertar555" style="align:center;z-index=10000" >
<img id="sertar55" class="sertar" ONCLICK="openS(this)" style="position: absolute;z-index: 100;align:middle;" src="img/sertar1.png">
</li>
</ul>


 </ul>
</body>
</html>

scripturi.js

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
$(function() {

    $( ".sortable" ).disableSelection();
    $( ".sortable" ).sortable({



        start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
        update: function (event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        {
            var eroare=0;

            //incepe trimiterea la bd a indexurilor
            for(var i=0;i<ui.item.parent().children().length;i++){
                    if(1==0) //eroare
                    eroare=1;
                    var x =ui.item.parent().children()[i];
                     //$(x).find('img').css('z-index',500-i);
                     y=$(x).children()[0];
                     y.style.zIndex=500-i*2;    
                    //alert($(x).children()[1].id)

                }
            if(eroare==0)//daca bd a upatat indexurile pt start_pos la eng pos
            {
                var copii=ui.item.parent().children();
                for(var i=0;i<ui.item.parent().children().length;i++){
                    //alert(ui.item.parent().children().eq(i).id())
                }


            }
            else {


                }
        }
    }

    });
  });

dulap.js

var inchide=0
var counter=1
var pic1=new Image()
pic1.src="img/sertar1.png"
var pic2=new Image()
pic2.src="img/sertar7.png"
var pic3=new Image()
pic3.src="img/sertar13.png"
var pic4=new Image()
pic4.src="img/sertar15.png"
var pic5=new Image()
pic5.src="img/sertar18.png"

var picX=pic1;

function openS(pic){
counter=2;
if(pic.src==pic5.src)
{inchide=1;contor=5;}
else {inchide=0;contor=1;}
picX=pic;
if(inchide==1)
inchide=0;
else inchide=1;
animate(pic);
}

function animate(){
var pict=picX;
pict.src=eval("pic"+counter+".src")
var x=pict.style.left;

pict.style.align="center";

if (counter<=4&&inchide==1)
{counter++;
}
else 

if(counter>=1&&inchide==0)
{counter--;//alert("al doilea if"+counter+ " " + inchide);
}
else {//alert("else "+counter+ " " + inchide);
return;}
setTimeout("animate(this)",20)
}

Answer 1

z-index将与位置相对一起使用。试试这个...... !!

绝对：中心位置（图像）

1 个答案: