jquery ie6兼容性问题

nn6965921nn 2013-01-24 04:40:53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://lib.sinaapp.com/js/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
/*鼠标经过降低增加透明度离开降低透明度*/
$(document).ready(function(){

$('.header_s_li ul li').hover(function() {

$(this).animate({
opacity:1,
}, 500, function() {
// Animation complete.
});
},function() {

$(this).animate({
opacity:0.3,
}, 100, function() {
// Animation complete.
});
});
});
/*鼠标点击降低增加透明度离开不降低透明度*/
$(document).ready(function(){

$('.header_s_li ul li').click(function() {
$(this).unbind("mouseleave");
$(this).animate({
opacity:1,
}, 0, function() {
$('.header_s_li ul li').not(this).animate({
opacity:0.3,
});
});
});
});
</script>
<style>
.header_s_li
{
width:245px; height:43px;
}
.header_s_li ul li
{
width:43px; height:43px; float:left; margin-left:6px; _margin-left:3px;
opacity: 0.3; overflow:hidden;

}
.header_s_li ul li a
{
width:100%; height:100%; display:block;
}
.header_s_li ul li.h1
{
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

opacity:1;
}
.header_s_li ul li.h1
{
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

opacity:1;
}
</style>
</head>

<body>
<div class="header_s_li">
<ul>
<li class="h1"><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.pngg" /></a></li>
<li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
</ul>
</div>
</body>
</html>
在IE6测试是没效果的在别的浏览器都有效果的淡入淡出

...全文

245 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

sbnui1989 2013-01-24

打赏
举报

楼主实在不行写2套JS吧判断下是IE6 就换另外一套实现效果... 我以前经常这么干...

bbjbepzz 2013-01-24

打赏
举报

引用 5 楼 jianqiangking 的回复:

直接发个IE8过去，让他们安装

我一直用google，IE现在还是IE10，哪敢用IE6，找刺激。 LZ纠正下，#2正解，我那个虽然不会报错，但也不对，只不过刚好把2楼说的问题去掉了（IE用JSON的时候，最后不要加逗号），所以才看到效果（其实我是在IE10下运行的）。

熊猫大虾 2013-01-24

打赏
举报

直接发个IE8过去，让他们安装

熊猫大虾 2013-01-24

打赏
举报

引用 3 楼 bbjbepzz 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-……

万恶的IE啊为什么还要用IE6？

bbjbepzz 2013-01-24

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="http://lib.sinaapp.com/js/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> /*鼠标经过降低增加透明度离开降低透明度*/ $(document).ready(function(){ $('.header_s_li ul li').hover(function() { $(this).animate({ opacity:1, 'filter:Alpha':100 }, 500, function() { // Animation complete. }); },function() { $(this).animate({ opacity:0.3, 'filter:Alpha':30 }, 100, function() { // Animation complete. }); }); }); /*鼠标点击降低增加透明度离开不降低透明度*/ $(document).ready(function(){ $('.header_s_li ul li').click(function() { $(this).unbind("mouseleave"); $(this).animate({ opacity:1, 'filter:Alpha':100 }, 0, function() { $('.header_s_li ul li').not(this).animate({ opacity:0.3, 'filter:Alpha':30 }); }); }); }); </script> <style> .header_s_li { width:245px; height:43px; } .header_s_li ul li { width:43px; height:43px; float:left; margin-left:6px; margin-left:3px; opacity: 0.3; filter: Alpha(opacity=30); overflow:hidden; } .header_s_li ul li a { width:100%; height:100%; display:block; } .header_s_li ul li.h1 { filter: Alpha(opacity=100); opacity:1; } .header_s_li ul li.h1 { filter:Alpha(opacity=100); opacity:1; } </style> </head> <body> <div class="header_s_li"> <ul> <li class="h1"><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li> <li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.pngg" /></a></li> <li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li> <li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li> <li><a href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li> </ul> </div> </body> </html> 万恶的IE

Go 旅城通票 2013-01-24

打赏
举报

/*鼠标经过降低增加透明度 离开降低透明度*/
    $(document).ready(function () {

        $('.header_s_li ul li').hover(function () {

            $(this).animate({
                opacity: 1//////,//这里多了一个,IE下JSON结束不能多,，在IE下会报错，firefox，chrome可以这样
            }, 500, function () {
                // Animation complete.
            });
        }, function () {

            $(this).animate({
                opacity: 0.3//////,//这里多了一个,IE下JSON结束不能多,，在IE下会报错，firefox，chrome可以这样
            }, 100, function () {
                // Animation complete.
            });
        });
    });
/*鼠标点击降低增加透明度 离开不降低透明度*/
$(document).ready(function () {

    $('.header_s_li ul li').click(function () {
        $(this).unbind("mouseleave");
        $(this).animate({
            opacity: 1//////,//这里多了一个,IE下JSON结束不能多,，在IE下会报错，firefox，chrome可以这样
        }, 0, function () {
            $('.header_s_li ul li').not(this).animate({
                opacity: 0.3//////,//这里多了一个,IE下JSON结束不能多,，在IE下会报错，firefox，chrome可以这样
            });
        });
    });
});

nn6965921nn 2013-01-24