ie8 jquery做图片淡入淡出 有锯齿

xx6965921xx 2013-01-23 02:40:57
<!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>
...全文
132 1 点赞 打赏 收藏 举报
写回复
1 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
.header_s_li ul li { width:43px; height:43px; float:left; margin-left:6px; _margin-left:3px; opacity: 0.3; overflow:hidden;background:#ffffff; } 加一个背景色就好了
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2013-01-23 02:40
社区公告
暂无公告