Question

在Wix中，当鼠标悬停在图像上方时图像淡出视图而当鼠标悬停在图像上方时淡入视图时，Wix需要什么代码？

我尝试使用此代码（及其他类似代码），但无效：

export function image4_mouseIn(event) {
  $w.onReady(function () {
   $w('#image4').onMouseIn( (Event) => {
    let fadeOptions = {
        "duration":   500,
        "delay":      500
    };

    $w("#image4").hide("fade", fadeOptions);
  } );
 });
}

export function image4_mouseOut(event) {
 $w.onReady(function () {
  $w('#image4').onMouseOut( (Event) => {
    let fadeOptions = {
        "duration":   500,
        "delay":      500
    };

    $w("#image4").show("fade", fadeOptions);
  } );
 }); 
}

Answer 1

您几乎完全正确。在页面代码上，您应该具有以下内容：

import pandas as pd

from io import StringIO

ss = StringIO('''
2009-06-18 20:00:00                       [temp, x_axis, z_axis]
2009-06-18 21:00:00                       [temp, x_axis, z_axis]
2009-06-18 23:00:00                                         None
2018-09-29 19:00:00                     [status,level, temp]
''')

df = pd.read_csv(ss, sep='\s+', names=['Data'])

series = df.Data

Answer 2

您的代码有两个问题：

1）您正在一起动态和静态创建事件处理程序。从技术上讲，您可以使用这两种方法，但不能同时使用。

要动态执行（无需常规函数声明）：

$w.onReady(function () {
  $w('#image4').onMouseIn( (Event) => {
    let fadeOptions = {
      "duration":   500,
      "delay":      500
    };

    $w("#image4").hide("fade", fadeOptions);
  } );
  // show function here 
} );

以静态方式进行操作（无需onReady）

export function image4_mouseIn(event) {
  let fadeOptions = {
    "duration":   500,
    "delay":      500
  };
  $w("#image4").hide("fade", fadeOptions);
}

注意：您需要使用属性面板将此功能连接到按钮。

2）您不能在隐藏的图像上运行mouseOut事件。要解决此问题，可以在图像后面添加一个框（该框可以是透明的），并在再次显示该图像的框上创建mouseOut事件处理程序。

export function box1_mouseOut(event) {
  let fadeOptions = {
    "duration":   500,
    "delay":      500
  };
  $w("#image4").show("fade", fadeOptions);
}

Answer 3

工作正常

$w.onReady(function () {
   let fadeOptions = {
        "duration":   500,
        "delay":      500
    };      
    $w('#image4').onMouseOut( (Event) => {
      $w('#image4').show('fade', fadeOptions);
    } );
    $w('#image4').onMouseIn( (Event) => {
      $w('#image4').hide('fade', fadeOptions);
    } );
 });

如何使用Wix代码在悬停时淡化图像？

3 个答案: