2011-04-25 113 views
0

這個自定義滑塊在所有其他瀏覽器中都能正常工作,但IE6 /可能像往常一樣痛苦。儘可能多的我想使用預製滑塊,它不是一個選項。Jquery懸停和切換功能在IE6中不起作用?

這裏的主要代碼:

$(document).ready(function() { 

//Slider Movement 

    //Slide 1 
    $(".hpsnav1").click(function() { 
     $(".slider-list").animate(
     { 
      marginLeft: "-40px", 
     }, 1000); 
    }); 
    //Slide 2 
    $(".hpsnav2").click(function() { 
     $(".slider-list").animate(
     { 
      marginLeft: "-744px", 
     }, 1000); 
    }); 
    //Slide 3 
    $(".hpsnav3").click(function() { 
     $(".slider-list").animate(
     { 
      marginLeft: "-1448px", 
     }, 1000); 
    }); 
    //Slide 4 
    $(".hpsnav4").click(function() { 
     $(".slider-list").animate(
     { 
      marginLeft: "-2152px", 
     }, 1000); 
    }); 
    //Slide 5 
    $(".hpsnav5").click(function() { 
     $(".slider-list").animate(
     { 
      marginLeft: "-2860px", 
     }, 1000); 
    }); 

// Slide Previews 

    $(".hpsnav1").live('hover', function() { 
     $(".prvw1").toggle(); 
    }) 
    $(".hpsnav2").live('hover', function() { 
     $(".prvw2").toggle(); 
    }) 
    $(".hpsnav3").live('hover', function() { 
     $(".prvw3").toggle(); 
    }) 
    $(".hpsnav4").live('hover', function() { 
     $(".prvw4").toggle(); 
    }) 
    $(".hpsnav5").live('hover', function() { 
     $(".prvw5").toggle(); 
    }) 

}); 

下面是HTML:

<div class="slider-wrap"> 
    <div class="slider-nav"> 
    <ul class="slider-nav-options"> 
     <li class="hpsnav1">1</li> 
     <li class="hpsnav2">2</li> 
     <li class="hpsnav3">3</li> 
     <li class="hpsnav4">4</li> 
     <li class="hpsnav5">5</li> 
    </ul> 
    <div class="slider-preview prvw1">Preview 1</div> 
    <div class="slider-preview prvw2">Preview 2</div> 
    <div class="slider-preview prvw3">Preview 3</div> 
    <div class="slider-preview prvw4">Preview 4</div> 
    <div class="slider-preview prvw5">Preview 5</div> 
    </div> 
    <ul class="slider-list"> 
    <li style="background:#066;" class="firstslide hps1"></li> 
    <li style="background:#960;" class="hps2"></li> 
    <li style="background:#3CC;" class="hps3"></li> 
    <li style="background:#639;" class="hps4"></li> 
    <li style="background:#9FF;" class="hps5"></li> 
    </ul> 
</div> 

這裏的主要樣式表:

.slider-wrap { 
    margin:0; 
    width:704px; 
    height:313px; 
    overflow:hidden; 
    background:#F00; 
} 
.slider-list { 
    margin:-67px 0 0 -40px; 
    width:4000px; 
    height:271px; 
    list-style:none; 
    background:#06F; 
} 
.slider-list .firstslide { 
    margin-left:0; 
} 
.slider-list li { 
    margin:0 0 0 -8px; 
    width:708px; 
    height:271px; 
    position:relative; 
    display:inline-block; 
    top:0px; 
} 
.hps1 {background:#0F0;} 
.hps2 {background:#093;} 
.hps3 {background:#0CC;} 
.hps4 {background:#66C;} 
.hps5 {background:#F63;} 

.slider-nav { 
    margin:0; 
    width:704px; 
    height:47px; 
    background:#f8d824; 
    position:relative; 
    top:250px; 
} 
.slider-nav-options li { 
    display:inline; 
    cursor:pointer; 
    position:relative; 
    top:13px; 
} 
.slider-preview { 
    width:460px; 
    height:20px; 
    position:relative; 
    left:220px; 
    top:-24px; 
    display:none; 
    text-align:center; 
} 

這裏的IE6的樣式表:

@charset "utf-8"; 
/* New Slider - IE6 */ 

    .slider-wrap { 
     position:relative; 
     margin:0; 
     width:704px; 
     height:313px; 
     background:#F00; 
     overflow:hidden; 
    } 
    .slider-list { 
     margin:-47px 0 0 -4px; 
     width:4000px; 
     height:271px; 
     list-style:none; 
     background:#06F; 
     overflow:hidden; 
    } 
    .slider-list .firstslide { 
     margin-left:2px!important; 
    } 
    .slider-list li { 
     margin:0 0 0 -8px; 
     float:left; 
     width:712px; 
     height:266px; 
     position:relative; 
     display:inline-block; 
     top:0px; 
    } 
    .hps1 {background:#0F0;} 
    .hps2 {background:#093;} 
    .hps3 {background:#0CC;} 
    .hps4 {background:#66C;} 
    .hps5 {background:#F63;} 

    .slider-nav { 
     margin:0; 
     width:704px; 
     height:47px; 
     background:#f8d824; 
     position:relative; 
     top:266px; 
    } 
    .slider-nav-options li { 
     display:inline; 
     cursor:pointer; 
     position:relative; 
     top:13px; 
    } 
    .slider-preview { 
     width:460px; 
     height:20px; 
     position:relative; 
     left:220px; 
     top:-24px; 
     display:none; 
     text-align:center; 
    } 
+0

哈哈哈我怎麼把我的代碼放在這裏而不被剝離? – user585148 2011-04-25 16:41:44

+0

@ user585148:使用編輯器中的「{}」按鈕:) – 2011-04-25 16:46:53

+1

您是否有活動的代碼示例? – 2011-04-25 16:48:55

回答

-1

你應該使用這樣的:

<script> 
if ($.browser.msie==true) { 
alert("Stop using IE. It's a terrible web browser."); 
} 

但是,如果你真的沒有找到一個答案,你就可以說這個網站是不兼容IE。