Internet Explorer中的Jquery代码中断

时间：2011-09-22 11:35:02

标签： jquery internet-explorer

我有以下代码用于叠加样式库。该脚本在FireFox，Chrome，Safari和Opera中运行得非常完美，但是在第一个缩略图上的Internet Explorer（7和8）中，单击背景叠加淡入淡出覆盖图像中的图像未显示 - 但是它在第二次点击。

此外，点击下一个或上一个的jquery淡入淡出动画看起来非常跳跃（仅在Internet Explorer中）。据我所知，它只是一个简单的fadeTo（）函数，所以我不确定原因。

对此的任何想法都将非常感激。代码：

HTML代码：

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>jQuery Gallery</title>

<link rel="stylesheet" href="scripts/gallery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script>

var Gallery = {

// PARAMETERS FOR CUSTOMISATION

transition_speed: 500,      // milliseconds
outer_opacity: 0.7,         // 0 to 1 
outer_colour: "#000000",    // hex value
show_captions: true,        // true, false



thumbs: [],
images: [],
captions: [],
current_image_id: null,


   init: function() {

      // CREATE ARRAYS

      var gallery_div = document.getElementById("gallery");
      gallery_thumbs = gallery_div.getElementsByTagName("img");


      for (var i=0; i < gallery_thumbs.length; i++) {
         Gallery.thumbs[i] = gallery_thumbs[i];
         Gallery.thumbs[i].rel = [i];
      }

      for (var i=0; i < gallery_thumbs.length; i++) {
         Gallery.captions[i] = Gallery.thumbs[i].alt;
      }


      // CREATE OVERLAYS

      var body_tag = document.getElementsByTagName("body");
      var outer_overlay = document.createElement("div");
      outer_overlay.id = "outer";
      outer_overlay.style.backgroundColor = Gallery.outer_colour;
      var window_height =  $(document).height();
      outer_overlay.style.height = window_height +'px';
      body_tag[0].appendChild(outer_overlay);
      var inner_overlay = document.createElement("div");
      inner_overlay.id = "inner";
      body_tag[0].appendChild(inner_overlay);
      var close_button = document.createElement("img");
      close_button.src="images/icon-close.png";
      close_button.id = "gallery-close";
      inner_overlay.appendChild(close_button);
      var next_button = document.createElement("img");
      next_button.src="images/icon-next.png";
      next_button.id = "gallery-next";
      inner_overlay.appendChild(next_button);
      var prev_button = document.createElement("img");
      prev_button.src="images/icon-prev.png";
      prev_button.id = "gallery-prev";
      inner_overlay.appendChild(prev_button);
      var caption_div = document.createElement("div");
      caption_div.id = "gallery-caption";
      inner_overlay.appendChild(caption_div);

      $("#gallery-caption").fadeTo(0, 0);
      if (Gallery.show_captions == true) {
         inner_overlay.onmouseover = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed/2, 0.5);};
         inner_overlay.onmouseout = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed, 0);};
      }

      // CREATE IMAGES

      for (var i=0; i < Gallery.thumbs.length; i++) {
         var new_image = document.createElement("img");
         new_image.src = Gallery.thumbs[i].parentNode.href;
         new_image.id= "gallery-img" + (i + 1);
         inner_overlay.appendChild(new_image);
         Gallery.images[i] = new_image;
         $(Gallery.images[i]).fadeTo(0, 0);
      }


      // EVENT HANDLERS FOR OPEN AND CLOSE

      for (var i=0; i < Gallery.thumbs.length; i++) {
         Gallery.thumbs[i].onclick = Gallery.open;
      }

      var outer_overlay = document.getElementById("outer");
      outer_overlay.onclick = Gallery.close;
      close_button.onclick = Gallery.close;
      next_button.onclick = Gallery.next;
      prev_button.onclick = Gallery.previous;

   },



   open: function() {

      Gallery.current_image_id = this.rel;
      var current = Gallery.images[Gallery.current_image_id];
      var caption_div = document.getElementById("gallery-caption");
      caption_div.innerHTML = Gallery.captions[Gallery.current_image_id];


      var inner_overlay = document.getElementById("inner");
      inner_overlay.style.height = current.height + "px";

      Gallery.positioning(current);


      $(current).fadeTo(0, 1);
      $("#outer").fadeTo(0, Gallery.outer_opacity);
      $("#inner").fadeTo(0, 0);
      $("#inner").fadeTo(Gallery.transition_speed, 1);


      return false;

   },



   close: function() {

      $("#outer").fadeTo(0, 0);
      $("#inner").fadeTo(0, 0);
      $("#outer").css("display", "none");
      $("#inner").css("display", "none");

      var current = Gallery.images[Gallery.current_image_id];
      $(current).fadeTo(0, 0);

   },



   next: function() {

      var next_id = Number(Gallery.current_image_id) + 1;
      if (next_id == Gallery.images.length) {next_id = 0;}
      var next = Gallery.images[next_id];
      var current = Gallery.images[Gallery.current_image_id];

      var inner_overlay = document.getElementById("inner");
      inner_overlay.style.height = next.height + "px";

      Gallery.positioning(next);


      var caption_div = document.getElementById("gallery-caption");
      caption_div.innerHTML = Gallery.captions[next_id];


      $(current).fadeTo(Gallery.transition_speed, 0);
      $(next).fadeTo(0, 0);
      $(next).fadeTo(Gallery.transition_speed, 1);

      Gallery.current_image_id = next_id;

   },


   previous: function() {

      var prev_id = Number(Gallery.current_image_id) - 1;
      if (prev_id == -1) {prev_id = Gallery.images.length -1;}
      var prev = Gallery.images[prev_id];
      var current = Gallery.images[Gallery.current_image_id];

      var inner_overlay = document.getElementById("inner");
      inner_overlay.style.height = prev.height + "px";

      Gallery.positioning(prev);


      var caption_div = document.getElementById("gallery-caption");
      caption_div.innerHTML = Gallery.captions[prev_id];


      $(current).fadeTo(Gallery.transition_speed, 0);
      $(prev).fadeTo(0, 0);
      $(prev).fadeTo(Gallery.transition_speed, 1);

      Gallery.current_image_id = prev_id;
   },


   positioning: function(img) {

      var next_button = document.getElementById("gallery-next");
      next_button.style.top = (img.height / 2) -15 + "px";
      var prev_button = document.getElementById("gallery-prev");
      prev_button.style.top = (img.height / 2) -15 + "px";
      $("#inner").css("top", (($(window).height()-$("#inner").height())/2));
      $("#inner").css("left", (($(window).width()-$("#inner").width())/2));
   }



};


// START SCRIPTS

Start = function() {
   Gallery.init();
};

window.onload = Start;



</script>

</head>
<body>

<div id="gallery">
    <a href="images/image1.jpg"><img src="images/thumbs/image1.jpg" alt="Caption 1"></a>
    <a href="images/image2.jpg"><img src="images/thumbs/image2.jpg" alt="Caption 2"></a>
    <a href="images/image3.jpg"><img src="images/thumbs/image3.jpg" alt="Caption 3"></a>
    <a href="images/image4.jpg"><img src="images/thumbs/image4.jpg" alt="Caption 4"></a>
    <a href="images/image5.jpg"><img src="images/thumbs/image5.jpg" alt="Caption 5"></a>
</div> 

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题