1

所以我才开始学习，所以我是初学者。我想要实现的是改变具有不同背景的 div，比如这里。在教程中完成了，但我想用背景属性来做，因为我不希望我的图像是可拖动的。

发生的情况是，不是每个图像相互流动并改变颜色，而是发生了一些白光。有什么帮助吗？

这是HTML

<p id="transitionControls">
  <span>Snap1</span>
  <span>Snap2</span>
  <span>Snap3</span>
  <span>Snap4</span>
  <span>Snap5</span>
  <span>Snap6</span>
  <span>Snap7</span>
</p>  

<div id="imageContainer" class='opaque'>
  <div id="Snap7"  class="snap"></div>
  <div id="Snap6"  class="snap"></div>
  <div id="Snap5"  class="snap"></div>
  <div id="Snap4"  class="snap"></div>
  <div id="Snap3"  class="snap"></div>
  <div id="Snap2"  class="snap"></div>
  <div id="Snap1"  class="snap"></div>
  </div>

这是CSS：

div{
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  background-size: 100% 100%;
  margin:auto;
  transition: opacity 1s ease-in-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

div.snap {
  opacity:0;
}

div.opaque{
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
 }

每个 Snap 都有简单的 CSS

#Snap1 {
background: url('img/Snap_1.jpg') no-repeat;
width: 1680px;
height: 1350px;
}

这是飞镖脚本

import 'dart:html';

DivElement div;
var counter = 0;

void main() {
  query("#transitionControls")
    ..onClick.listen(changeDiv);
}
//
void changeDiv(MouseEvent event) {


  SpanElement snap = event.target;
  var text = snap.text;
  div = query(".opaque");


  query("#$text").classes.add("opaque");

  div.classes.remove("opaque");
  }
4

1 回答 1

1

一些重新定位的 CSS 属性在这里和那里。一些 Dart 代码在这里和那里重构。在类下添加#imageContainer块元素opaque可能会阻止您的目标。您的示例如下所示：

对于 DOM：

<p id="transitionControls">
  <span>Snap1</span>
  <span>Snap2</span>
  <span>Snap3</span>
</p>

<div id="imageContainer">
  <div id="Snap1" class="opaque"></div>
  <div id="Snap2" class="snap"></div>
  <div id="Snap3" class="snap"></div>
</div>

对于 CSS：

  #imageContainer {
    position: relative;
    height: 24rem;
    background-color: #ddd;
    margin: auto;
  }

  #imageContainer .snap,
  #imageContainer .opaque {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }

  .snap {
    z-index: 1;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  .opaque {
    z-index: 2;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=1);
  }

  #Snap1 {
    background-color: green;
  }

  #Snap2 {
    background-color: blue;
  }

  #Snap3 {
    background-color: red;
  }

Dart 很丑，可以重构。

import 'dart:html';

final triggers = query('#transitionControls');

main() {
  triggers.onClick.listen(changeDiv);
}

changeDiv(Event event) {
  SpanElement snap = event.target;

  // Fade the current opaque layer.
  query('#imageContainer .opaque').classes
      ..remove('opaque')
      ..add('snap');

  // Reveal the target layer.
  query('#${snap.text}').classes
      ..remove('snap')
      ..add('opaque');
}

希望这可以帮助。

于 2013-07-15T19:30:07.090 回答