追加(ajax -data）屏幕外(左:100%;)

Append(ajax -data) outside screen (left:100%;)

本文关键字：100% 屏幕 ajax -data 追加      更新时间：2023-09-26

我正在尝试创建一个帖子滑块。我使用 ajax 对数据收费，然后应用 append 将内容注入到div （id=ajaxinserted1）。但我不想将这些数据添加到屏幕中。我希望将数据添加到屏幕外部（左：100%），因此我可以应用 CSS 过渡以使其具有幻灯片动画效果的屏幕。

如何将（数据）附加到屏幕外的 DOM 中？

谢谢

下面的代码应该根据从请求返回的图像的宽度动态计算偏移量。解释是内联的。这也要求容器绝对定位。

// Cache the element
var $container = $('.ajaxinserted1');
// Append the images to the container
$container.append(
	'<img src="https://www.placehold.it/100">',
	'<img src="https://www.placehold.it/100">',
	'<img src="https://www.placehold.it/100">',
	'<img src="https://www.placehold.it/100">'
)
// Store the offset value
var offsetLeft = 0;
// Loop over the images and update the offset value
$.each($container.children(), function(a, b) {
	offsetLeft = offsetLeft - b.width;
})
// Set the offset for the container
$container.css('left', offsetLeft);
// Animation
$('.ajaxinserted1').animate({
	left: "10px"
}, 500);
.ajaxinserted1 {
	position: absolute;
}
.ajaxinserted1 img {
	padding: 10px;
	height: 100px;
	width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajaxinserted1"></div>

如果我

正确理解您的问题，您只需要将帖子附加到现有帖子下方并设置其样式，使其显示在屏幕外，以便它可以滑入。 所以也许像...

1）将您的新帖子HTML附加到内容div中，上面有一个名为"new-post"的类

2）使用CSS进行新帖子类...

.new-post {
  position:relative;
  left:100%;
}

3）执行CSS过渡以将其滑回屏幕上，并在完成后删除类。

笔记：

  • 您可能需要以绝对像素设置 left 属性，例如 600px ，这取决于页面的布局以及您希望它从哪里滑入。

  • 您可以考虑使用opacity:0并在过渡中进行淡入淡出

相关文章：