Question

当用户在div内移动鼠标大约100px时，我试图随机更改图像的来源。我只想更新源代码，而不是将图像叠加在一起，或者将它们设置为显示：block或display：none等。

Here is an example网站加载完成后，请务必点击查看示例。

到目前为止，我有以下HTML

<div class="header-image-inner">
    <img src="img/image-01.png" alt="" />
</div>

$(".header-image-inner").mousemove(function (event) {
    $(".header-image-inner img").attr('src', 'image-02.png');
    $(".header-image-inner img").attr('src', 'image-03.png');
    $(".header-image-inner img").attr('src', 'image-04.png');
});

Answer 1

我做了同样的工作演示。

HTML

$(document).ready(function(){
    var images = [
        "https://images.unsplash.com/photo-1518127864129-8d0834d765bc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5acdfad29e7fef07a86e6174e3b1d73c&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1518065336951-d16c043900d6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05f800ba4e6c18a40a8f7cf12cdd2c35&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60"
    ];
    var currentX = 0, currentY = 0;
    $('.header-image-inner').mousemove(function(e){
        if(Math.abs(currentX-e.pageX) > 50 || Math.abs(currentY-e.pageY) > 50){
            currentX = e.pageX;
            currentY = e.pageY;
            $('.header-image-inner img').attr('src',images[Math.floor(Math.random()*images.length)]);
        }
    })
})

JS

library(shiny)
library(dplyr)
server <- function(input, output, session) {

  # set the default choices and set previous selection to initial selectInput vector
  globalList <- reactiveValues(ManyChoices = LETTERS[1:3], SelectedPrev = c())

output$multipleSelect <- renderUI({
selectizeInput("selectMany",
               label = "I want to select each multiple times",
               choices = c(" ", globalList$ManyChoices),
               selected = " ",
               multiple = TRUE,
               options = list(closeAfterSelect = TRUE, openOnFocus = TRUE))
})

observeEvent(input$selectMany, {

# if sth was added
if(length(input$selectMany) > length(globalList$SelectedPrev)) {
  #find out what was modified
  vDiff <- setdiff(input$selectMany, globalList$SelectedPrev) %>% setdiff(., " ")
  # used when removing " " and selecting sth to double the selection
  if(length(vDiff) == 0) vDiff <- input$selectMany[length(input$selectMany)]
  req(input$selectMany != " ") # if only " " is selected then there is no need to update
  # get the position of selected element
  vIndex <- which(globalList$ManyChoices == vDiff)
  vLength <- length(globalList$ManyChoices)
  # create new choices in the correct order
  globalList$ManyChoices <- c(globalList$ManyChoices[1:vIndex],
                              paste0(vDiff, " "),
                              if(vIndex < vLength) {globalList$ManyChoices[(vIndex + 1):vLength]})
} else {
  # remove the version with additional space when value was removed
  vDiff <- setdiff(globalList$SelectedPrev, input$selectMany)
  globalList$ManyChoices <- setdiff(globalList$ManyChoices, paste0(vDiff, " "))
}

# update previous selection
globalList$SelectedPrev <- input$selectMany

# update input with same selection but modified choices
updateSelectizeInput(session = session,
                     inputId = "selectMany",
                     selected = c(" ", input$selectMany),
                     choices = c(" ", globalList$ManyChoices))
})
}

ui <- function() {
fluidPage(
  uiOutput("multipleSelect")
)
}

shinyApp(ui, server)

代码不言自明。我希望它有所帮助。

如何在mousemove上随机更改图像源？

1 个答案: