Question

我正在为这个组织设计一个网站，希望他们的图片显示在页面的一侧，主要内容在中间。当到达页面的新部分时，图片将改变以反映所讨论的新内容（因此，在这种情况下，每个Div表示历史中的一段时间，在页面的列的两侧表示）。我的问题是我不知道如何向图片添加照片过渡，因此它不会“跳”到位，而不是让用户体验到它在新div（部分）上的缓和。任何和所有建议都会受到欢迎，我已经尝试过CSS3轻松进出效果，但没有运气，因为我需要它在div的悬停时从黑色背景中放松，并进入图片（我真的不喜欢了解如何在CSS3中创建效果，您将悬停在中间div上，但只影响两个侧面div）。任何帮助，将不胜感激。

编辑：侧面的蓝色条表示图片的去向，以及在用户将鼠标悬停在中心（橙色）div之前页面的开始状态。在悬停时，蓝色条会更改，如第二张图片中所示。问题是，众所周知，这些图片只是“跳”到位，而不是放松（更多的是眼睛看到的）。

HTML / JS：

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="practice.css" rel="stylesheet">
</head>

<body>
  <div id = "first" style = "background-color:blue">
    <div class = "col-sm-1" id = "left">
    </div>
    <div style = "background-color: orange;" class = "col-md-10" onmouseover="changeIn('left','right')" onmouseout="changeOut('left','right')">
    </div>
    <div class = "col-sm-1" id = "right">
    </div>
  </div>


  <div class = "second">
    <div class = "col-sm-1"></div>
    <div style = "background-color: green;" class = "col-md-10"></div>
    <div class = "col-sm-1"></div>
  </div>
</body>
</html>

<script type="text/javascript">

    function changeIn(spot1,spot2){
        var spot1 = spot1;
        var spot2 = spot2;
        document.getElementById(spot1).style.backgroundImage = "url('1.jpg')"
        document.getElementById(spot2).style.backgroundImage = "url('2.jpg')"
    }
    function changeOut(spot1,spot2){
        document.getElementById(spot1).style.backgroundImage = ""
        document.getElementById(spot2).style.backgroundImage = ""
    }
</script>

onMouseOut结果（页面如何开始）： onMouseOut Result

OnMouseOver结果（页面结束方式）： OnMouseOver Result:

Answer 1

不是一个完全的想法，但这样的事情应该可以正常工作......

block.addEventListener('mouseover', function () {
  parent.classList.add('transition-in');
  parent.classList.remove('transition-out');
});

此处的完整示例：http://jsfiddle.net/k2dqs4y0/

Answer 2

尝试css过渡/转换效果， http://www.w3schools.com/css/css3_transitions.asp

或写一个js脚本，如果你不知道怎么做，你怎么能写一个网站？

让我的图像轻松自如

2 个答案: