ホームページ > ウェブフロントエンド > jsチュートリアル > image_jquery をズームインおよびズームアウトした後に複雑な並べ替えを実装するための js メソッド

image_jquery をズームインおよびズームアウトした後に複雑な並べ替えを実装するための js メソッド

WBOY
リリース: 2016-05-16 17:48:30
オリジナル
1218 人が閲覧しました

これはjqueryをベースにした画像エフェクトで、画像をクリックすると大きく(小さく)なると、他の画像が一定のルールに従って並べ替えられて移動します。

まず、最終的なレンダリングを見てみましょう:


これを見て、なぜこれは難しすぎるのではないかと思う人もいるかもしれません。シャオティは大したことをしたのですか?実際にやってみると、その難しさがわかります。

まず、要件について説明します。
1. 写真は 4 つの小さな写真の位置を占めます。
3. 偶数列 (2,4) をクリックすると、その前の項目が持ち上げられ、その後ろに配置されます。
4.項目は移動できません。2 番目の項目をクリックすると 3 番目の位置に配置されます。4 番目の項目は、後ろから 1 番目の小さい項目を取り出して 2 番目の位置に置きます。
需要は次のようなものです。今は、この需要に従って段階的に実装するのが難しいでしょうか?コードは次のとおりです:

コードをコピーします コードは次のとおりです:

var elemArr = $("#old").find("li").get();
var arrCol=[0,0,0,0];
var デフォルトサイズ = 211;
function setPosition(elemArr,content,oldContent){
//alert(elemArr.length)
if (elemArr.length==0){
$(oldContent).remove();
animate(content.find("li"));
var max = Math.max(arrCol[0],arrCol[1],arrCol[2],arrCol[3])
$(content).parent().height(max);
$(コンテンツ).高さ(最大);
戻る;
}
var item= $(elemArr.shift());
if (item.hasClass("big")){
//大
var min =computeMin(content);
var x = min.x;
var y =min.y;
if (x==defaultSize){
var tmp = $("li[x='0'][y='" y "']",content);
if (tmp.hasClass("static")){
//第一个
/*
arrCol[1]=0;
x=2*デフォルトサイズ;
if ($("li[x='" x "'][y='" y "']",content).size()>0){
y=parseInt($(" li[x='" x "'][y='" y "']",content).attr("y")) 2*defaultSize;
}
arrCol[1]=0;
*/
elemArr=insertSmallArr(elemArr,item);
setPosition(elemArr,content,oldContent);
戻る;
}else{
elemArr=$("li[x='0'][y='" y "']",content).get().concat(elemArr);
//$("li[x='0'][y='" y "']",content).remove();
x-=デフォルトサイズ;
arrCol[0]-=defaultSize;
}
}
if (x==defaultSize*3){
elemArr=$("li[x='"defaultSize*2 "'][y='" y "'] ",content).get().concat(elemArr);
//$("li[x='200'][y='" y "']",content).remove();
x-=デフォルトサイズ;
arrCol[2]-=defaultSize;
}
item.attr({"top":y,"left":x}).attr({"x":x,"y":y});
if (x==0){
arrCol[0] =defaultSize*2;
arrCol[1] =デフォルトサイズ*2;
}
if (x ==defaultSize*2){
arrCol[2] =defaultSize*2;
arrCol[3] =defaultSize*2;
}
}else{
//小
var min =computeMin(content);
var x = min.x;
var y =min.y;
item.attr({"top":y,"left":x}).attr({"x":x,"y":y});

if (x==0){
arrCol[0] =defaultSize;
}
if (x ==defaultSize){
arrCol[1] =defaultSize;
}
if (x ==defaultSize*2){
arrCol[2] =defaultSize;
}
if (x ==defaultSize*3){
arrCol[3] =defaultSize;
}
}
$(content).append(item)
setPosition(elemArr,content,oldContent);
}
setPosition(elemArr,$("#news"),$("#old"));
function insertSmallArr(arr,item){
arr = item.get().concat(arr);
var tmpArr =[];
var first =null;
for (var i=arr.length-1;i>=0 ;i-- ){
if (!$(arr[i]).hasClass("big")){
first =arr[i];
休憩;
}
}
if (最初){
tmpArr.push(最初);
}
for (var i=0,l=arr.length;iif (first !== arr[i]){
tmpArr.push(arr [私]);
}
}

return tmpArr;
}
function computeMin(content){
var arr = $(content).find("li");
var miny = Math.min(arrCol[0],arrCol[1],arrCol[2],arrCol[3])
var minx= 0;
if (miny==arrCol[3]){
minx=defaultSize*3;
}
if (miny==arrCol[2]){
minx=defaultSize*2;
}
if (miny==arrCol[1]){
minx=defaultSize;
}
if (miny==arrCol[0]){
minx=0;
}
return {x:minx,y:miny};
}
$("#main_content").delegate("li","click",function(){
if ($(this).index()==0){
false を返します;
}
if (!$(this).hasClass("big")){
$(this).attr({"h":417,"w":417})
}else{
$(this).attr({"h":206,"w":206})
}
$(this).toggleClass("big"); 🎜>$(this).parent().hide();
var c =$(this).parent().children();
c.attr({"x":0,"y) ":0});
arrCol=[0,0,0,0];
var tmpArr = c.get();
var content = $('
    $("#main_content").append(content);
    setPosition(tmpArr,content,$(this).parent());
    $(" #addNews").click(function(){
    varparent = $(this).closest("ul");
    $(this).parent().after("
  • news< /li>");
    var c =parent.children();
    var tmpArr = c.get();
    var content = $('
      ') ;
      $("#main_content").append(コンテンツ);
      arrCol=[0,0,0,0];
      setPosition(tmpArr,content,親);
      });
      function animate(arr){

      $(arr).each(function(){
      $(this).animate({
      "top":parseInt($(this) .attr("top"))、
      "left":parseInt($(this).attr("left"))、
      "width":parseInt($(this).attr("w" )),
      "height":parseInt($(this).attr("h"))
      })
      });
      }

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート