草庐IT

javascript - 动态背景滚动

coder 2023-08-08 原文

这是 a link到我将要提到的内容。

我在让背景图片按我希望的方式工作时遇到了一些问题。

我希望背景根据窗口的宽度自动调整大小，它已经正确地做到了。如果您缩小窗口，您会看到背景随之缩小。

问题来了。如果您使窗口变宽(变短)，那么背景将调整大小并变得过高，因此您再也看不到背景的顶部(因为背景位于底部)。 当你在页面顶部时，我希望背景位于顶部位置，当你向下滚动时，它会慢慢移动到底部位置。有点像 Android 手机的背景效果你左右移动。当然，请记住，当您缩小窗口时，我仍然希望背景自动调整大小。

html {
  background-color: #70d4e3;
  height: 100%;
}

body {
  height: 100%;
}

.background {
  margin-top: 45px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -9999;
}

.banner {
  margin: 0px auto;
  width: 991px;
  margin-bottom: -9px;
}

.content {
  background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
  height: 889px;
  margin: 0 auto;
  width: 869px;
}

.innerContent {
  padding: 30px;
}
<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />

<div class="banner">
  <img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
  <div class="innerContent">
    testing
  </div>
</div>

也许需要一些 javascript 或 jquery 来实现这一点。

最佳答案

嗯，这很有趣，谢谢!

我希望你不介意我冒昧地使用百分比来让我的生活更轻松一些，并且脚本可能稍微更健壮一些，因为我可以可靠地使用带有百分比的 float 。

我所做的是使布局、html 和 css 符合正确设置 bg 动画所需的规则，它们与您所拥有的基本相同。

然后这只是一个问题，即计算出正确属性所需的计算量，以计算出您距离顶部的百分比，*20 实际上是“剩余”到的空间量按百分比填充背景图像(因为背景高度为 80%)。

我将计算移到了一个函数中，这样我就可以在滚动和窗口调整大小时调用它，确保它在任何以某种方式修改窗口的事件上启动...

没有做广泛的测试，但它在 Chrome 中工作，我很累 :p

我相信这就是您要找的:

http://jsfiddle.net/sg3s/RSqrw/15/参见编辑 2

如果你想要相反的方式，只需让页面背景从顶部开始并修改它:

http://jsfiddle.net/sg3s/RSqrw/14/见编辑 2

编辑:

作为奖励，并且由于我从未真正将 jquery 脚本编写为“插件”，所以我决定将其转换为一个。我想出的东西应该易于实现和使用!

http://jsfiddle.net/sg3s/RSqrw/52/ 参见编辑 3

功能在 Chrome、Firefox 3.6、IE9 + 兼容模式下成功测试

编辑 2:

再次阅读问题，检查我是否做对了，我注意到我没有完全按照您的要求进行操作，因此我更新了第一次编辑中的链接，它为您提供了一个插件，您可以在其中有几个滚动背景选项。它保留了我的“旧”解释，同时也做你想做的事……阅读代码中的评论以获得一些额外的描述。

编辑 3:

今天上类时，我的插件“try”有点臃肿，这让我很烦恼。正如您在评论中提到的那样，它不太符合要求。

所以我重写了它，让它只做你想做的，而不是做更多，在 Chrome Firefox、IE9 +compat 等中测试。这个脚本更清晰。

http://jsfiddle.net/sg3s/vZxHW/

如果高度适合窗口，您可以选择使背景贴在顶部或底部。没有别的，但这已经足够做一些很酷的事情了:p

关于javascript - 动态背景滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7459553/

javascript动态sectionstrongjsfiddlejqueryhtmlcssbackground

有关javascript - 动态背景滚动的更多相关文章

  1. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  2. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  3. ruby - 在 Ruby 中动态创建数组 - 2

    有没有办法在Ruby中动态创建数组？例如，假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在，对于用户输入的每一本书，我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.

  4. ruby - 是否可以将 IRB 提示配置为动态更改？ - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - carrierwave:在序列化动态属性上安装 uploader - 2

    首先，我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟

  7. ruby - 在 Ruby 中动态生成多维数组 - 2

    我正在尝试动态构建一个多维数组。我想要的基本上是这样的(为简单起见写出来):b=0test=[[]]test[b]这给了我错误:NoMethodError:undefinedmethod`test=[[],[],[]]而且它工作正常，但在我的实际使用中，我不会事先知道需要多少个数组。有一个更好的方法吗？谢谢 最佳答案 不需要像您正在使用的索引变量。只需将每个数组附加到您的test数组:irb>test=[]=>[]irb>test[["a","b","c"]]irb>test[["a","b","c"],["d","e","f"]]

  8. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  9. ruby - 动态方法链？ - 2

    如何在对象上调用方法名称的嵌套哈希？例如，给定以下哈希:hash={:a=>{:b=>{:c=>:d}}}我想创建一个方法，给定上面的散列，执行以下操作:object.send(:a).send(:b).send(:c).send(:d)我的想法是我需要从一个未知的关联中获取一个特定的属性(这个方法不知道，但程序员知道)。我希望能够指定一个方法链来以嵌套哈希的形式检索该属性。例如:hash={:manufacturer=>{:addresses=>{:first=>:postal_code}}}car.execute_method_hash(hash)=>90210

  10. ruby - 如何使用 method_missing 动态声明方法？ - 2

    我有一个ruby​​程序，我想接受用户创建的方法，并使用该名称创建一个新方法。我试过这个:defmethod_missing(meth,*args,&block)name=meth.to_sclass我收到以下错误:`define_method':interningemptystring(ArgumentError)in'method_missing'有什么想法吗？谢谢。编辑:我以不同的方式让它工作，但我仍然很好奇如何以这种方式做到这一点。这是我的代码:defmethod_missing(meth,*args,&block)Adder.class_evaldodefine_method

随机推荐