个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在设计一个网站，其中我想在向下滚动时放大图像，当发生这种情况时，当我向下滚动底部时图像将被推到屏幕的左侧或右侧(就像图像一样将在我向下滚动时超出屏幕)。我已经完成了滚动位的放大，但老实说，我不知道如何在滚动时向左/向右移动。任何帮助将不胜感激。谢谢。
编辑:
这是我到目前为止所取得的成就，关于我希望能够做的事情。
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<img src="http://www.freepngimg.com/download/plants/6-2-plants-free-download-png.png" class = "zoom">
<script>
$(window).on("scroll", function() {
var s = Math.min(400, $(document).scrollTop()) + 200;
$(".zoom").width(s).height(s);
});
</script>
</body>
CSS:
body{
width: 100%;
height: 1200px;
}
img {
position: fixed;
width: 200px;
left: 0;
bottom: 0;
}
最佳答案
我举了个例子。包含此 html
<div class="wrapper">
<img class="image" src="https://www.mozilla.org/media/img/firefox/home/switch-
to-firefox.fb1c114dfd84.png">
</div>
CSS
body{
height:2000px;
}
.wrapper{
}
.image{
height:150px;
width:150px;
position:relative;
left:0;
}
和javacsript
var oldScrollTop=0;
var newScrollTop;
$(window).scroll(function(e){
if($(window).scrollTop() <=150){ // you can manage the height of viewport of image here
newScrollTop = $(window).scrollTop()
var step = newScrollTop - oldScrollTop
var imageHeight = $('.image').css('height');
var imageWidth = $('.image').css('width');
var imageLeft = $('.image').css('left');
var NewimageHeight = parseInt($('.image').css('height')) - step;
var NewimageWidth = parseInt($('.image').css('width')) - step;
var NewimageLeft = parseInt($('.image').css('left')) -step;
$('.image').css({"height":NewimageHeight ,"width":NewimageWidth,
"left":NewimageLeft});
oldScrollTop = newScrollTop;
}
})
这是链接
关于javascript - 如何在向下滚动页面时放大图像并将图像推到屏幕外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48944372/
24
4
0
当我推/拉存储库时，是否可以详细输出到底发生了什么？目前，我有一个大型存储库，正在将其推送到服务器，大约 15 分钟后。或者这样，它给了我一个错误，但没有告诉我它在这 15 分钟内做了什么。 最佳答案
我不知道我的方法是否有意义，但是，我需要实现如下图的布局: 现在，我只写一个 并用其中的一列表示每个区域，例如 . 没有黄色区域，这工作正常: green red blue
当我查看许多 CSS 网格系统和框架时，它们通常具有标准的列和行设置以及百分比宽度。例如这样的事情: 标准网格列: .col-10 { width: 83.33333%; width: cal
我想使用 git 子模块。 我需要采取的步骤将我的更改推送到我的项目是 add/commit/push from submodule directory add/commit/push from pa
以下为百度站长平台的公告全文： 结合站长对于关键词数据分析的需求，站长平台对流量与关键词工具进行了升级，推出(“关键词影响力”）这一全新概念。关键词影响力算法复杂，涵盖该关键词下百度搜索可以为
我需要一个具有普通按钮和下拉按钮的控件。 例如 类似的控件在 wxRibbonButtonBar 中可用，我无法在简单的 wxPanel 中使用它。 最佳答案 我实现了 SplitButton，它看起
我一直在做一个项目，使用 Bazaar 作为版本控制系统。现在我必须和离岸人员一起工作，而他们只想使用 SVN。 我有什么: 我的 bazaar 分支及其文件和修订版。 一个全新的 subversio
我一直在开发数据流/图表风格的内部 DSP 应用程序(Java 带有 Groovy/Jython/JRuby 的钩子(Hook)，通过 OSGi 的插件，大量的 JNI)，类似于纯数据和 simuli
我正在尝试使用 THUMB 指令创建一个阶乘方法，我基本上做到了。 我只有一个关于 PUSH/POP 操作码的问题:如果我使用 push 将 r0 的值存储在堆栈中(所以 push {r0} )，我可
在尝试 ZeroMQ Push/Pull (他们称之为 Pipeline)套接字类型时，我很难理解这个图案。它被称为“负载均衡器”。 假设单个服务器将任务发送给多个工作人员，推/拉将在所有客户端之间平
有什么方法可以使用 push() 方法找出我的数据何时保存在数据库中？我写了下面的代码，但它多次保存数据...... db.ref('news').push(opts).then(() => {
我有这个问题，每次推或拉时我都必须把它放进去。我认为这是新的。有什么想法吗？ 最佳答案 您可能正在使用 https 网址。切换到 ssh 并确保您的 key 设置正确(如果您的密码短语为空)，则不必输
为什么当您将一个值压入堆栈时，ESP 寄存器会减少(而不是增加)，而当您弹出一个值时，ESP 寄存器会增加(而不是减少)？在这一点上，这对我来说是违反直觉的。 最佳答案 那是因为堆栈是从上到下“增长”
有什么方法可以使用 push() 方法找出我的数据何时保存在数据库中？我写了下面的代码，但它多次保存数据...... db.ref('news').push(opts).then(() => {
我决定编写一个测试代码来查看 pusher - many pullers bundle 是如何工作的，我的怀疑成真了。 拉取器按照连接的顺序接收消息，例如第一个消息由第一个连接的拉取器接收，第二个由第
我在 CSV 文件中存储了一长串日期。我已经成功地使用 d3.js 加载了这个数据集。现在我想向此数据集添加另一列，其中包含列表中每个日期的随机数。 我相信此数据集已作为对象数组加载。所以我正在使用下
我一直在寻找解决方案。不使用 c++11。 for(int a = 1; a < team1.chan; a++) { team1.nums.push_back(ppb.back())
我打算在布局中构建带有滑动 subview 的 UI。 +--------------+ +--------------+ +--------------+ | view1
Title 在小屏幕上，我首先需要标题，然后是文本字段，但在中等以上的屏幕上，我需要相反的方式 - 我已经尝试过推和拉，但它们无法工作 - 有什么想法吗？ 最佳答案 根据 Swa
zmq 的某些部分未以可预测的方式运行。 我正在使用 VS2013 和 zmq 3.2.4。为了不在我的 pubsub 框架中“丢失”消息 [旁白:我认为这是一个设计缺陷。我应该能够首先启动我的订阅者
我是一名优秀的程序员,十分优秀！