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);
 }

各スナップがシンプルな 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クラスの下に block 要素を追加すると、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 に答える