Question

嘿大家我有一个家庭作业问题，

我需要淡入淡出图像＆＃34;画廊风格＆＃34;使用JavaScript。注意：不是JQuery。根据作业大纲，我不能使用JQuery。

所以有一个图像网格（如果你关心的话，有32个图像），它们都是100x100px的缩略图。每个都在它自己的div中，整个事物嵌套在另一个div中，如下所示：

的 gallery.html 的

<div id="imageContent">

<div id="img" class="imageWhite" 
     onclick="fade(1984)"
     onmouseover="highlightWhiteFunction(this)" 
     onmouseout="unHighlightFunction(this)"> 
     <img src="../Media/Thumbs/1984.jpg"/> 
</div>

...31 others just like that

</div> //End of the whole container

因此，当您单击其中一个图像时，它应该将该图像淡入其他所有图像的顶部。该图片的宽度应为500px，但高度可以变化，因此不会出现失真。同样，我不能使用JQuery ......是的，我知道这会让生活变得更轻松。

到目前为止，我只有一个调试的东西来检测我至少可以找到哪个被点击：

的 gallery.js 的

function fade(name) {
    var theName = name;
    console.debug("Clicked " + theName);
}

如果用户点击此图片的任何位置，则需要淡出。如果用户点击另一个缩略图，它不需要淡出，它可以消失，但另一个需要开始淡入。

我的想法：显然我需要一个宽度为500的隐藏div，当这些动作发生时，我会根据需要隐藏/取消隐藏div。我从教授那里得到的要点是，使用JavaScript，你可以根据你从系统中获得的时间长度来改变不透明度。

我在这里的答案中寻找的可能是一些更清晰（更详细）的关于如何解决这个问题的提示。我知道它需要看起来如何，而且我非常确定我知道如何做到这一点的高级别，我只是不知道如何开始使用代码。

任何帮助都会受到赞赏，我会回答任何后续问题。

再次：没有JQuery！：）

Answer 1

这样的事情应该有效

 function fadeIn(el, time) {
     el.style.opacity = 0;
     el.style.display = "block";

     var last = +new Date();
     var tick = function() {
          el.style.opacity = +el.style.opacity + (new Date() - last) / time;
          last = +new Date();

          if (+el.style.opacity < 1) {
               (window.requestAnimationFrame && requestAnimationFrame(tick)) ||      setTimeout(tick, 16)
          }
     };

     tick();
}

这是一个例子： http://jsfiddle.net/cEDbs/

只需单击图像onclick即可使用该元素调用该方法。

Answer 2

这是一个基于CSS的解决方案。淡化可能与您想要的不完全相同，但可以轻松调整。尝试JSFiddle并单击图像以查看css转换 - 单击图像会使其变大。再次点击将其淡化。

http://jsfiddle.net/Rh976/

<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img1"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img2"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img3"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img4"/>

<强> JS

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++){
    var img = imgs[i];
    img.addEventListener('click',function(e){  
        if(!this.className.match(/big/)){          
            this.className += ' big'; 
        } else {
             this.className = this.className.replace(/big/,'');
        }
    });        
}

<强> CSS

.img {
    -webkit-transition: all 1.0s ease-out;
    -moz-transition: all 1.0s ease-out;
    -o-transition: all 1.0s ease-out;

    position:absolute;   
    width:150px;
    height:100px;
    z-index:1;
}

.img.img1 { top: 10px;  left: 10px; }
.img.img2 { top: 10px;  left:170px; } 
.img.img3 { top:120px;  left: 10px; }
.img.img4 { top:120px;  left:170px; } 

.img.big {
    position:absolute;
    width:450px;  
    height:300px;
    top:10px;
    left:10px;
    z-index:20;
}

使用JavaScript淡化图像（不是JQuery！）

2 个答案: