我有一个带缩略图的定义列表。 它们具有50%的不透明度和“拇指”级别。 当徘徊100%不透明度。 单击100%不透明度并将'thumb'更改为'thumbactive'类
到目前为止,我糟糕的代码工作,唯一的问题是我无法在点击时获得100%的tn。
dl { width: 700px; } dt { clear: left; float: right; width: 400px; height:80px; margin: 0 0 10px 0; background:orange; } dd.thumb, dd.thumbActive { clear: none; float: left; margin: 0 0 10px 0; background:black; } dd { clear: right; }
jQuery.noConflict(); jQuery(document).ready(function() { /* just for debugging */ function showClassNames() { jQuery("dt").each(function() { var className = jQuery(this).next().attr('class'); jQuery(this).text(className); }); }; showClassNames(); /* resets all thumbs (50% alpha, .thumb classname) */ function resetThumbs() { jQuery("dd").each(function() { jQuery(this).removeClass("thumbActive"); jQuery(this).addClass("thumb"); jQuery("dd img").css('opacity', 0.5); }); }; // half opacity for all thumbs except the first one (active) jQuery("dd:not(.thumbActive) img").css('opacity', 0.5); jQuery("dd img").hover( function() { jQuery(this).css('opacity', 1.0); }, function() { jQuery(this).css('opacity', 0.5); } ); jQuery("a.thumbClick").click(function() { resetThumbs(); jQuery(this).parent().removeClass("thumb"); jQuery(this).parent().addClass("thumbActive"); jQuery(this).css('opacity', 1.0); showClassNames(); return false; }); }); // end document ready
<div id="album-canvas-left" style="width:930px; " >
<dl id="thumb-list" >
<dt></dt>
<dd class="thumbActive"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
<dd></dd>
</dl>
答案 0 :(得分:2)
我只是将您的不透明度设置移动到CSS,只需在jQuery中添加/删除类。事实上,如果你没有针对IE6,你可以在CSS中使用:hover
来处理不透明度。
使用IE6支持
dd img{
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
dd.hover img, dd.thumbActive img {
opacity: 1.0;
-moz-opacity: 1.0;
filter:alpha(opacity=100);
}
然后将hover
更改为此:
jQuery("dd").hover(
function() { jQuery(this).addClass('hover'); },
function() { jQuery(this).removeClass('hover'); }
);
没有IE6支持
dd img{
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
dd:hover img, dd.thumbActive img{
opacity: 1.0;
-moz-opacity: 1.0;
filter:alpha(opacity=100);
}
完全删除hover
来电。
答案 1 :(得分:1)
当你点击然后鼠标移开时,仍然会调用悬停输出功能,将不透明度设置回.5
你应该在悬停函数(悬停函数的第二个参数)中检查并确保对象的类没有设置为thumbActive。
答案 2 :(得分:0)
感谢两者,我想出了这个:
dd img { opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=50); } /* IE6 does not support :hover */ dd.hover img { opacity: 1.0; -moz-opacity: 1.0; filter:alpha(opacity=100); }
jQuery("dd").hover( function() { jQuery(this).addClass('hover'); showClassNames(); }, function() { if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover'); } ); jQuery("a.thumbClick").click(function() { jQuery("dd").removeClass("hover active"); jQuery(this).parent().addClass("hover active"); return false; });
<dl id="thumb-list" >
<dt></dt>
<dd class="thumb hover active"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
<dd></dd>
</dl>