Question

我有一张照片，希望它的背景能够改变并重复从整个频谱中按顺序采用随机颜色，直到用户的鼠标退出图片。我想解决方案应该使用setInterval（see this），以下内容应该有所帮助：

var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
var bg = "background-color: rgb(" + red + "," + green + "," + blue + ");";
x.style = bg;

Here is a fiddle trying to implement what I have in mind：第一个笑脸应该改变onMouseOver的颜色并返回正常onMouseOut。

以下是我的想法：我想实现FontAwesome.com do on their logo at their footer：它会改变onmouseover上的颜色，否则就会停止。但那不是图片，它是一种字体（？）。相反，我有一个透明的徽标，我想动态更改背景，以便复制Fontawesome的精彩技巧。有什么想法吗？

*已更新*

我根据社区的答案在下面发布了我的问题的详细解决方案。看起来我跟着Leo的方式，但Rakibul的解决方案也运作良好。

Answer 1

我实现了我想要的目标。

我希望我的徽标可以改变颜色＆＃34;很好地＆＃34;当用户的鼠标悬停在它上面时（就像魔术一样，类似于FontAwesome's logo at their footer）。

＆＃13;

.OAlogo {
  background-color: transparent;
  animation-play-state: paused;
}

.OAlogo:hover {
  animation: colorReplace 10s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes colorReplace {
  0% {
    background-color: rgb(44, 132, 231);
  }
  10% {
    background-color: rgb(61, 192, 90);
  }
  20% {
    background-color: rgb(255, 211, 59);
  }
  30% {
    background-color: rgb(253, 136, 24);
  }
  40% {
    background-color: rgb(243, 129, 174);
  }
  50% {
    background-color: rgb(34, 138, 230);
  }
  60% {
    background-color: rgb(62, 192, 89);
  }
  70% {
    background-color: rgb(255, 211, 59);
  }
  80% {
    background-color: rgb(71, 193, 86);
  }
  90% {
    background-color: rgb(253, 126, 20);
  }
  100% {
    background-color: rgb(233, 109, 132);
  }
}

＆＃13;

<img class="OAlogo" src="http://www.stouras.com/OperationsAcademia.github.io/images/OA-logo-solo.png" style="background: black;" width="100">

＆＃13;

Answer 2

使用CSS动画更改颜色，并在悬停时使用.button { width:100px; height:20px; background-color: red; animation: colorReplace 5s infinite; } .button:hover { animation-play-state: paused; } @keyframes colorReplace { 0% {background-color:red;} 30% {background-color:green;} 60% {background-color:blue;} 100% {background-color:red;} }。

＆＃13;

<input type="submit" value="submit" class="button" />

＆＃13;

class CustomAdapter2 extends ArrayAdapter<GroceryItem> implements Filterable
{
private ArrayList<GroceryItem> mObjects;
private ArrayList<GroceryItem> mOriginalValues;
private ArrayFilter mFilter;
private LayoutInflater mLayoutInflater;

CustomAdapter2(@NonNull Context context, int resource, @NonNull ArrayList<GroceryItem> inputValues) {
    super(context, resource, inputValues);
    mLayoutInflater = LayoutInflater.from(context);
    mObjects = inputValues;
}

public void setBackup(){
    mOriginalValues = new ArrayList<>();
    mOriginalValues.addAll(mObjects);
}

@SuppressLint("ClickableViewAccessibility")
@Override
public View getView(int position, View convertView, ViewGroup parent) {

    // Get the data item for this position
    GroceryItem currentGroceryItem = getItem(position);

    // Check if an existing view is being reused, otherwise inflate the view
    if (convertView == null) {
        convertView = mLayoutInflater.inflate(R.layout.custom_layout, parent, false);
    }

    // Lookup view for data population
    ImageView groceryImage = (ImageView) convertView.findViewById(R.id.groceryImage);
    TextView groceryNameText = (TextView) convertView.findViewById(R.id.groceryName);
    LinearLayout overallItem = (LinearLayout) convertView.findViewById(R.id.linearLayout);

    // Populate the data into the template view using data
    groceryImage.setImageResource(currentGroceryItem.getImageID());
    groceryNameText.setText(currentGroceryItem.getName());
    if(currentGroceryItem.isSelected()){
        overallItem.setBackgroundColor(0xFF83B5C7);
    } else{
        overallItem.setBackgroundColor(0xFFFFFFFF);
    }

    // Set onClickListener for overallItem
    overallItem.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int pos = (int)v.getTag();
            GroceryItem currentGroceryItem = getItem(pos);

            searchBar.clearFocus();

            // Changes the selection status of the GroceryItem
            currentGroceryItem.toggle();

            // Changes the colour of the background accordingly (to show selection)
            if(currentGroceryItem.isSelected()){
                v.setBackgroundColor(0xFF83B5C7);
            } else{
                v.setBackgroundColor(0xFFFFFFFF);
            }
        }
    });

    // Return the completed view to render on screen
    convertView.setTag(position);
    return convertView;
}

/////////////////////////////////FOR SEARCH FUNCTIONALITY///////////////////////////////////
@NonNull
@Override
public Filter getFilter() {
    if(mFilter == null){
        // Make a backup copy of list
        setBackup();
        mFilter = new ArrayFilter();
    }
    return mFilter;
}

private class ArrayFilter extends Filter {

    @Override
    protected FilterResults performFiltering(CharSequence prefix) {

        FilterResults results = new FilterResults();
        ArrayList<GroceryItem> list = new ArrayList<>();

        // If there is no input query
        if (prefix == null || prefix.length() == 0) {
            // Set the FilterResults value to the copy of mOriginalValues
            list = new ArrayList<>(mOriginalValues);

            // If there is an input query (at least one character in length)
        } else {

            // Converts the query to a lowercase String
            String prefixString = prefix.toString().toLowerCase();

            // Iterates through the number of elements in mOriginalValues
            for (int i = 0; i < mOriginalValues.size(); i++) {

                // Gets the GroceryItem element at position i from mOriginalValues' copy
                GroceryItem value = mOriginalValues.get(i);

                // Extracts the name of the GroceryItem element into valueText
                String valueText = value.getName().toLowerCase();

                // First match against the whole, non-splitted value
                if (valueText.startsWith(prefixString)) {
                    list.add(value);
                }
                else {

                    // Splits the one String into all its constituent words
                    String[] words = valueText.split(" ");

                    // If any of the constituent words starts with the prefix, adds them
                    for (String word : words) {
                        if (word.startsWith(prefixString)) {
                            list.add(value);
                            break;
                        }
                    }
                }
            }
        }

        // Sets the FilterResult value to list ArrayList.
        results.values = list;
        results.count = list.size();
        return results;
    }

    @Override
    protected void publishResults(CharSequence constraint, FilterResults results) {
        clear();
        addAll((ArrayList<GroceryItem>)results.values);
        notifyDataSetChanged();
    }
}
////////////////////////////////////////////////////////////////////////////////////////////
}

＆＃13;

Answer 3

您必须使用所需的时间间隔（在下面的示例中设置为500）声明setInterval()，以便在确定的时间间隔内随机更改颜色。 onmouseover用于简单地检测图像上的悬停，然后随机设置颜色。最后，当检测到onmouseout时，颜色会变为无颜色。

＆＃13;

var randomColor = function() {
  var r = Math.floor(Math.random() * 12);
  var g = Math.floor(Math.random() * 128);
  var b = Math.floor(Math.random() * 100);
  return "#" + r + g + b;
};

var colorChange;

document.getElementById("myImage").onmouseover = function() {
  colorChange = setInterval(function() {
    document.getElementById("myImage").style.backgroundColor = randomColor();
  }, 500);
};

document.getElementById("myImage").onmouseout = function() {
  this.style.backgroundColor = "";
  clearInterval(colorChange);
};

＆＃13;

<img id="myImage" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley">

＆＃13;

Answer 4

您可以使用setInterval函数反复运行代码。您修复了代码中的一些小错误。请在此处查看更新后的小提琴：https://jsfiddle.net/zvebco3r/3/

您可以将间隔时间（当前为25毫秒）更改为所需的长度。

<强> HTML：

<img id="img" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32">

<强> JS：

var img = document.getElementById('img');

img.onmouseover = function() {
    changeIt = setInterval(function(){
       var red = Math.floor(Math.random() * 255);
       var green = Math.floor(Math.random() * 255);
       var blue = Math.floor(Math.random() * 255);
       img.style.backgroundColor="rgb("+red+","+green+","+blue+")";
    },25);
}

img.onmouseout = function() {
    this.style.backgroundColor="transparent";
    clearInterval(changeIt);
}

反复改变图片onMouseOver的背景颜色

4 个答案: