小编nut*_*ics的帖子

我试图建立一系列悬停放大的缩略图.我的初步构建通过使用CSS3转换完成放大/缩放部分:缩放和轻松进入.问题是它们彼此重叠,因为它们共享一个z轴.

任何人都可以帮我创建一个javascript添加到这个场景,正确地将每个缩略图定位在一个有意义的z轴,即每个放大的图像调整大小在每个其他图像的顶部.

在我的网站上 演示:演示更新:已解决

代码预览:

HTML:

<div style="position: absolute;" class="item hover"> 
 <a href="#"><img alt="two" src="img/posts.png"></a> 
</div>

CSS:

#main div.hover {
position: relative;
z-index:200;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #297ab1;}

#main div.hover:hover, #main div.hover_effect {
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5);
-o-transform:scale(1.5, 1.5);
-ms-transform:scale(1.5, 1.5);
transform:scale(1.5, 1.5);}

脚本:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

因此,此页面使用此脚本切换hover_effect类,将div的比例增加到150%.

解: z-index:999 …

我有一组缩略图,我想在选择另一个缩略图时减少到40%.原始缩略图将保持100%不透明度.我需要为淡出的缩略图设置一般版本,以便在页面上的任何位置单击将使其他拇指恢复到100%不透明度.

以下是演示:http://www.dumstr.com/sofeb11/stash/

JS:

$(function() {           
    $("div#fadeout .stashthumb").click(function () {             
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
    },          
    function () {      
            $("div#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);       
    });

HTML

<div id="fadeout" class="stasher">

     <div style="opacity: 1;" class="stashthumb">
     <span><a href="#"><img src="img/stash-01.jpg"></a></span>
     </div>
</div>

谢谢!