専門家に、Mi 4 プロモーション ページでこの特殊効果を作成する方法を説明していただけますか?_html/css_WEB-ITnose

http://www.mi.com/mi4#fea-ten
URLは上記、黒と白の切り替えです。手動で切り替えることもできます。
ありがとう！

ディスカッションに返信（解決策）

上下2枚の写真は使用できませんか？

Web ページからコードを抽出し、主に幅と高さを計算するために 4 つの画像を使用するデモ コードを作成します
デモ コードのウィンドウが比較的小さいため、ドラッグ ボタンの位置が上に移動されます (スタイル.mi4 -content-feature-h .margin-top in .feature-float-control)

Web ページ上のコードを抽出し、デモ コードを作成します。主に幅と高さを計算するために 4 つの画像が使用されます。
デモコードのため、ウィンドウが比較的小さいので、ドラッグボタンを上に移動しました (style.mi4-content-feature-h .feature-float-control の margin-top)

効果は非常に優れています。それ

http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png
http://img03.mifile.cn/webfile/images/2014/cn /goods/mi4/ ma/fea-37.png

確かに2枚の写真です。 2階の組み立てスキルは本当に強いです

例は公式ウェブサイトから引用しました。2 枚の写真は白黒携帯電話の表側、4 枚の写真は白黒携帯電話の表と裏です。白い携帯電話。
http://img03.mifile.cn/webfile/images/2014/cn/goods/mi4/ma/fea-35.png /cn/goods/mi4/ma/fea-37. png

は確かに 2 つの写真です。 2階の組立力は本当に強いです