Question

以下代码示例正在使用，图像不会在任何IE版本中显示。

HTML代码：

<div class="container" style="text-align:center;">
 <ul class="thumb">
  <li style="height:220px; padding: 0 40px 0 0;  overflow:visible; 
         position: relative;">
   <img width="246px" height="208px" src="images/about4.jpg" 
         alt="Biomimetic and Biological Materials"/>
  </li>
 </ul>
</div>

jQuery的：

<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '-110px', 
            top: '50%', 
            left: '50%', 
            width: '600px', 
            height: '400px', 
            padding: '20px' 
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '246px', 
            height: '208px', 
            padding: '5px'
        }, 400);
});

//Swap Image on Click
    $("ul.thumb li a").click(function() {

        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;       
    });
 });
 </script>

我做错了吗？谢谢:)）

Answer 1

尝试点击'交换图片点击'点击处理程序 $(document).ready(function() {，确保在DOM准备好进行JavaScript处理后绑定它。

Answer 2

它的工作..也在IE ..

http://www.jsfiddle.net/antiflu/GWyAg/

你的问题究竟是什么？

Answer 3

查看您的布局和引用的代码您正在搜索：

$("ul.thumb li a")

但在“ul.thumb li”下你只有“img”标签，而不是“a”。

可能是问题所在。

图像未在IE中呈现

3 个答案: