如何将图像放入我的滚动文本js中

How to put image into my scrolling text js

本文关键字：滚动 文本 js 我的 图像      更新时间：2023-09-26

我正在使用下面的js插件进行文本滚动：https://github.com/aamirafridi/jQuery.Marquee

基本上，我们只需要调用下面的文本滚动：

$('.marquee').marquee();

但我也计划把图片放到滚动文本中。就像它在自述文件中提到的那样，我们需要像下面这样放置$（window）.load，这样它就可以准确地计算图像宽度：

$(window).load(function() { $('.marquee').marquee(); });

此功能将在网页加载后加载字幕。

但是，如果我只是在收到命令后才加载字幕呢。例如：

receivedCom = function(){ $('.marquee').marquee({duration: 8000}); });

我已尝试将$（window）.load放入receivedCom函数中。它跑不动了。知道怎么做吗？

我对这个例子进行了更多的修改。由于您知道从服务器发送的图像数量，因此可以将该数字作为num_images传递给客户端。客户端将把字幕内容转储到具有marquee类的div中，然后检查期望的图像是否与字幕div中的数字匹配。如果没有，加载仍在进行，我们每隔半秒就会检查一次。加载完成后，我们清除setInterval调用，并告诉字幕开始。

正如我们在聊天中所讨论的，setTimeout在启动字幕代码时是有效的，因为它在单独的事件循环中执行代码，使插件有机会"看到"新加载的动态图像。如果以下内容不适用，请尝试稍微增加setTimeout延迟。

我添加了一个不使用socket.io的工作示例。在这支笔中，内容被动态添加到字幕div中，一次添加两个图像。直到看到里面有八个图像，这个字幕才会初始化。与下面的代码类似，setInterval被调用来检查预期的图像数量是否与DOM中的实际图像数量匹配。

HTML

<div class='marquee'></div>

服务器JS

// Send the HTML along and the known number of images
// inside the string
socket.emit('your_event_name', { 
  marquee_content : 'html images and text go here',
  num_images      : 3
});

客户端JS

var socket          = io.connect('http://localhost')
    images_expected = 0, // 'num_images' from socket.emit data
    interval;
function startMarquee() {
  $('.marquee').marquee({duration: 8000});  
}
function checkImagesLoaded() {
  if ($('.marquee img').length === images_expected) {
    clearInterval(interval);
    setTimeout(startMarquee); // fire in new event loop    
  }
}
function insertMarqueeContent(content) {
  $(".marquee").html(content);
}
function initMarquee() {
  interval = window.setInterval(checkImagesLoaded, 500);  
}
socket.on('your_event_name', function (data) {
  images_expected = data.num_images;
  insertMarqueeContent(data.marquee_content);
  initMarquee();
});

如果我正确理解你的问题，"在我收到命令之后"意味着你正在寻找一个事件。

根据你想要收听的事件类型，有很多技巧

例如，您可能想要监听鼠标点击：

$(document).ready(function(){
  $(window).click(function(event, target){
    $('.marquee').marquee();
  });
});

JSfiddle在这里：http://jsfiddle.net/knr2qzxu/如果你想玩一玩：）

如果你想更深入地了解这里发生的事情，我强烈建议你在这里阅读更多关于jQuery事件的信息：https://api.jquery.com/category/events/

编辑：

好的，我又问了一遍你的问题，如果我没有答对，请纠正我：

js代码中的某个地方有一个函数，它是这样写的：receivedCom=function（com）{}；如果是这样，请在调用字幕功能之前检查窗口是否已加载：

var receivedCom = function(com) {
  if (document.readyState === "complete") {        
    $('.marquee').marquee(); 
  }
};

接下来：js检查你的窗口是否显示正确，然后触发字幕。

您也可以使用setInterval每隔n毫秒检查一次窗口是否已加载，然后触发字幕，如果需要，请阅读文档：http://www.w3schools.com/jsref/met_win_setinterval.asp

请告诉我它是否有效！

相关文章：