Jquery元素定位等

发布于 2024-10-05 14:16:56 字数 3101 浏览 0 评论 0原文

大家好，我通常很擅长编辑，但这次我想用 Jquery 尝试一些新的东西。我正在尝试创建一个“3D”卡片页面（类似于： http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&redirect_back=true&ref=45) 但我可以' t 放置元素，我认为我的代码都是错误的。

这是 JS：

$(document).ready(function() { //perform actions when DOM is ready
 var z = 0; //for setting the initial z-index's
    var inAnimation = false; //flag for testing if we are in a animation
    var imgLoaded = 0; //for checking if all images are loaded

 $('.img').each(function() {
  z++; 
  $(this).css('z-index', z);
  imgLoaded++;
 });

function swapFirstLast(isFirst) {
  if(inAnimation) return false; //if already swapping pictures just return
  else inAnimation = true; //set the flag that we process a image

  var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
  if(isFirst) { 
      processZindex = z; newZindex = 1; inDeCrease = 1; 
     } else { 
      processZindex = 1; newZindex = z; inDeCrease = -1; 
     } //set variables for "next" and "previous" action

  $('.img').each(function() { //process each image
   if($(this).css('z-index') == processZindex) { //if its the image we need to process
    $(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() { 
     $(this).css('z-index', newZindex) //set new z-index
      .animate({top : '0' }, 'slow', function() {
       inAnimation = false; //reset the flag
       $(this).animate({ opacity: 1 }, 500);
      });
    });
   } else { //not the image we need to process, only in/de-crease z-index
    $(this).animate({top : '0' }, 'slow', function() { //make sure to wait swapping the z-index whe
     $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
    });
   }
  });
 return false; //don't follow the clicked link
 }

 $('#next a').click(function() {
  return swapFirstLast(true); //swap first image to last position
 });

 $('#prev a').click(function() {
  return swapFirstLast(false); //swap last image to first position
 });

});

这是 HTML：

<html>
<head>
<style type="text/css">
ul { list-style: none;
 margin: 200px;}

#pictures { position: relative; height: 408px;}

.img {
 position: absolute;
 top: 10;
 left: 0;
 padding: 10px;
 background: #eee;
 border: 1px solid #fff;
 -webkit-transform: translate(0px, 0px) skew(0deg, 5deg);
}
.desc {
 max-height: 30px;
 text-align: center;
 padding: 10px 10px 0 10px;
}
li {
 border: 5px solid #c4c8cc;
 -moz-box-shadow: 3px 3px 10px #888;
 -webkit-box-shadow: 3px 3px 10px #888;
 padding: 200px;
}
</style>
</head>
</html>

<div id="gallery"> 

 <ul id="pictures"> 
  <li class="img">
   <div class="desc">Hello World</div>
  </li>
  <li class="img">
   <div class="desc">Hello World</div>
  </li>
 </ul> 
</div>

抱歉弄乱了，但我急于完成这项工作 - 非常感谢所有帮助：D

原文

Hey Guys, I'm normally pretty good with editing but this time I thought I'd try something new with Jquery. I'm trying to create a "3D" card page (Similar to this: http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&redirect_back=true&ref=45) but I can't position the elements and I think my codes all wrong.

Here's the JS:

$(document).ready(function() { //perform actions when DOM is ready
 var z = 0; //for setting the initial z-index's
    var inAnimation = false; //flag for testing if we are in a animation
    var imgLoaded = 0; //for checking if all images are loaded

 $('.img').each(function() {
  z++; 
  $(this).css('z-index', z);
  imgLoaded++;
 });

function swapFirstLast(isFirst) {
  if(inAnimation) return false; //if already swapping pictures just return
  else inAnimation = true; //set the flag that we process a image

  var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
  if(isFirst) { 
      processZindex = z; newZindex = 1; inDeCrease = 1; 
     } else { 
      processZindex = 1; newZindex = z; inDeCrease = -1; 
     } //set variables for "next" and "previous" action

  $('.img').each(function() { //process each image
   if($(this).css('z-index') == processZindex) { //if its the image we need to process
    $(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() { 
     $(this).css('z-index', newZindex) //set new z-index
      .animate({top : '0' }, 'slow', function() {
       inAnimation = false; //reset the flag
       $(this).animate({ opacity: 1 }, 500);
      });
    });
   } else { //not the image we need to process, only in/de-crease z-index
    $(this).animate({top : '0' }, 'slow', function() { //make sure to wait swapping the z-index whe
     $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
    });
   }
  });
 return false; //don't follow the clicked link
 }

 $('#next a').click(function() {
  return swapFirstLast(true); //swap first image to last position
 });

 $('#prev a').click(function() {
  return swapFirstLast(false); //swap last image to first position
 });

});

And here's the HTML:

<html>
<head>
<style type="text/css">
ul { list-style: none;
 margin: 200px;}

#pictures { position: relative; height: 408px;}

.img {
 position: absolute;
 top: 10;
 left: 0;
 padding: 10px;
 background: #eee;
 border: 1px solid #fff;
 -webkit-transform: translate(0px, 0px) skew(0deg, 5deg);
}
.desc {
 max-height: 30px;
 text-align: center;
 padding: 10px 10px 0 10px;
}
li {
 border: 5px solid #c4c8cc;
 -moz-box-shadow: 3px 3px 10px #888;
 -webkit-box-shadow: 3px 3px 10px #888;
 padding: 200px;
}
</style>
</head>
</html>

<div id="gallery"> 

 <ul id="pictures"> 
  <li class="img">
   <div class="desc">Hello World</div>
  </li>
  <li class="img">
   <div class="desc">Hello World</div>
  </li>
 </ul> 
</div>

Sorry for the mess, but I'm in a hurry to get this done - all help is much appreciated :D

分享到QQ

分享到微博