- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 javascript 在 div 内部 float 的图像。 div 位于长卷轴页面的第一部分。因此,图像在第一个 div 中弹跳,但当我向下滚动时,它仍保留在该 div 中。我希望当用户向下滚动时图像向下移动到页面(在正文中),并且图像从浏览器窗口弹起并使用浏览器窗口作为引用,而不是如下代码中所示的容器 div。
我尝试过将 div 放入正文中,但我认为这与 javascript 有关。
图像本质上被困在container-fluid
内部。将其从该容器中取出并将脚本的x和y更改为$(window).width()
和 $(window).width() 没有起到作用。
<div class="container-fluid">
<div class="section-1-new">
<li><img src="<?php echo get_template_directory_uri(); ?>/images/image.png"></a></li>
</div>
</div>
<script>
$.fn.bounce = function(options) {
var settings = $.extend({
speed: 10
}, options);
return $(this).each(function() {
var $this = $(this),
$parent = $this.parent(),
height = $parent.height(),
width = $parent.width(),
top = Math.floor(Math.random() * (height / 2)) + height / 4,
left = Math.floor(Math.random() * (width / 2)) + width / 4,
vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);
// place initialy in a random location
$this.css({
'top': top,
'left': left
}).data('vector', {
'x': vectorX,
'y': vectorY
});
var move = function($e) {
var offset = $e.offset(),
width = $e.width(),
height = $e.height(),
vector = $e.data('vector'),
$parent = $e.parent();
if (offset.left <= 0 && vector.x < 0) {
vector.x = -1 * vector.x;
}
if ((offset.left + width) >= $parent.width()) {
vector.x = -1 * vector.x;
}
if (offset.top <= 0 && vector.y < 0) {
vector.y = -1 * vector.y;
}
if ((offset.top + height) >= $parent.height()) {
vector.y = -1 * vector.y;
}
$e.css({
'top': offset.top + vector.y + 'px',
'left': offset.left + vector.x + 'px'
}).data('vector', {
'x': vector.x,
'y': vector.y
});
setTimeout(function() {
move($e);
}, 0);
vectorX = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1),
vectorY = settings.speed * (Math.random() > 0.5 ? 0.1 : -0.1);
};
move($this);
});
};
$(function() {
$('.section-1-new li').bounce({
'speed': 1.8
});
});
最佳答案
您需要这样设置 CSS:
position: absolute;
left: 50%;
top: 50%;
关于javascript - 如何让元素而不是元素漂浮在主体内部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39583440/
我有一个空的水平布局,我动态地填充了三个 child 。这是一个纸牌游戏,因此此布局会动态填充具有图像集的 QLabel 子项。当我点击一张卡片来播放它并将其移动到屏幕中央时,我希望其他卡片的位置保持
我正在尝试通过膨胀并使用 FragmentTransaction 将其添加到 Activity 来动态创建一个 float Fragment。 当我将它添加到容器(添加到我在容器中为它创建的 Fram
这个问题在这里已经有了答案: CSS3 Flex: Pull child to the right (1 个回答) 关闭 5 年前。
我的应用程序有 1 个父框和 2 个子框 (divs)。此时,子框出现在彼此下方 This is b This is c .a{border:solid;width:30
是否可以在不单独指定每种类型的情况下对所有上述类型进行扩展? 例如,这是Double的扩展: extension String { init?(_ value: Double?) { if
Due to rounding errors, most floating-point numbers end up being slightly imprecise. https://www.flo
我是一名优秀的程序员,十分优秀!