小编DBU*_*BUK的帖子

我最近遇到了这个网站http://www.ascensionlatorre.com/home,我喜欢鼠标滚轮滚动的方式 - 缓和非常顺畅.

我一直在搜索谷歌,但我找不到类似的东西.

有没有人对如何使用jQuery复制这种效果有任何建议？

我一直在两个专栏网站上工作,当你滚动时:列A上升,列B下降.我实现了一个无限滚动,但我想知道的是:是否有可能克隆/追加一列到另一列,例如在一定的滚动长度:

一旦滚出视图:

• A列框将移动到B列的末尾
• B列框将移动到A列的末尾

技术上仍然是无限的,但是从一列到另一列循环框 - 将一个放到另一个然后再返回.

这种方法是不好的,或者,在每列上使用无限滚动更好吗？什么让我沮丧,因为我是JS和jQuery的新手,是逻辑......以及实现这一目标的最佳方法是什么.

*图像只是例如,盒子的数量可以更高,例如每列10个.

我的代码到目前为止:http://jsfiddle.net/djsbaker/vqUq7/1/

我目前尝试克隆/追加:

      var ele = document.getElementById("box");
      var arr = jQuery.makeArray(ele);
      var data = (ele)[0];

      $(window).scroll(function() {

        if ( $(window).scrollTop() >= 1000) {

          $(data).clone().appendTo('body');

        } else {

        }

      });

当我在循环/无限网站上滚动时,我正在寻找正确方向的帮助/点/或闪烁/跳跃的解决方案,这可以在这个小提琴中看到.

似乎导致跳跃的是:

" $(window).scrollTop(half_way - child_height);",以及什么也可能是Chrome Windows的scrollTop错误,但它现在在所有浏览器中都会发生.

如果我删除" - child_height",则不再有闪烁,但页面不再正确滚动,这可以在这个小提琴中看到.

此外,在第一个卷轴上,右侧列向上跳了三个盒子 - 也因为' half_way',我可以通过给它一个" bottom: -600px;" 来修复

完整代码:

http://jsfiddle.net/djsbaker/j3d8r/1/

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);

function crisscross() {
    $('#up-left').css('bottom', '-' + window.scrollY + 'px');
    $('#down-right').css('bottom', '-' + window.scrollY + 'px');
    var firstLeft = $('#up-left').children().first();
    var lastLeft = $('#up-left').children().last();
    var lastRight = $('#down-right').children().last();
    var firstRight = $('#down-right').children().first();

    if (window.scrollY > …

我使用CSS Sprite技术,背景图像看起来像这样:

图标的CSS代码:

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

我的图标可以像这样使用:

<div class="icon warning"></div>

我想在我的图标中添加一些文字,如:

<div class="icon warning">There is a warning on this page</div>

但问题是背景图像覆盖整个文本区域:

问题是:我如何只使用图像的一部分作为我元素的一部分的背景图像？

笔记:

• 设置width为16pxfor div.icon无济于事.

我有一个<span>我想要旋转的东西.我使用的是HTML5,CSS3和Internet Explorer 9.

我尝试了下面的CSS,但它不起作用:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 

如何旋转跨度？

我正在使用同位素(http://isotope.metafizzy.co)与可扩展项目,我想使用ScrollTo,以便我可以自动滚动到新扩展的项目..

我首先尝试使用reLayout方法进行回调,例如:

container.isotope('reLayout', iwannascroll(origin));

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}

origin是一个变量,我从点击处理程序中放入"this".
不幸的是,我总是得到对象的旧位置..

实际上我不确定回调是否过早被调用,或者我是否无法理解如何存储我的jQuery对象使其更像是副本或"指针";-)

任何想法 ？

编辑:我现在确定在动画结束前调用回调,所以我的问题是:我现在怎么能完成动画？

好的,所以它不是一个巨大的担忧,因为它只有少数浏览器支持:

• Mozilla Firefox:支持
• 谷歌浏览器:从版本13开始支持(使用备用语法)
• Safari:目前不支持Internet
• 资源管理器:目前不支持

然而,预取让我抽搐.如果用户登陆您的页面并退回到另一个站点,您是否支付了他们访问预取链接的带宽？

是否存在开发人员预取页面上的每个链接的风险,这反过来会使网站对用户的体验变慢？

看起来它可以改变分析.人们会通过预取强制页面浏览到用户吗？

安全性,您不会知道正在预取的页面.它可以预取恶意文件吗？

对于使用有限的移动用户来说,所有这些预取是否会让人痛苦？

我正在玩并试图建立一个视差网站 - 是的,我知道他们是一个讨厌的时尚,但我仍然想要去.所以,为了获得灵感,我一直在研究好的视差网站的各种例子,并且遇到了这个:https://victoriabeckham.landrover.com/INT.

它使用鼠标滚轮,滚动条和锚链接进行平滑滚动.我一直在寻找能够实现这种效果的jQuery插件,但似乎只能找到那些使用内部页面链接的插件 - 锚点或ID(详见下文) - 但不是鼠标滚轮和滚动条.我很有可能使用错误的关键字进行搜索.有没有人知道找到这些插件的正确术语或知道任何可以实现这种效果的插件？

在旁注中,我目前正在学习jQuery和Javascript,但我还处于早期阶段 - 仍在通过codeacademy进行拖网,而不是在任何现实世界的代码上.所以目前我正在使用插件作为一种学习方式,但希望在几个月内我可以构建自己的东西!

平滑滚动以锚定标签或ID:

• http://archive.plugins.jquery.com/project/ScrollTo
• http://jsfiddle.net/9Amdx/7/
• http://arthurclemens.github.com/jquery-page-scroll-plugin/
• http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
• http://www.designova.net/scrollerbird/
• http://chris-spittles.co.uk/?p=462
• http://joelb.me/scrollpath/(* @DrunkRocketeer提供)

并且,使用类似技术进行滚动的视差网站的另一个示例:

• http://www.ascensionlatorre.com

我正在设计一个新网站,我遇到了一个问题.我希望我的导航栏工作的方式是它融入标题(徽标栏).

以下是编码时的情况:

这是我想要的样子:

目前这是我的CSS:

#header {
margin: 0px auto;
width: 900px;
height: 170px;
background: #000;
}

#navigation {
margin: 0px auto;
width: 920px;
height: 60px;
background: url('images/nav.png');
}

我的HTML:

        <div id="header">

        </div>


        <div id="navigation">

        </div>

我一直在玩同位素 http://isotope.metafizzy.co/demos/relayout.html 并且一直在尝试创建一个保持固定大小的父容器,总是有6个较小的项目,并重新调整以适应第7个较大的项目.

这是我到目前为止在jsfiddle http://jsfiddle.net/pedalpete/LGBg6/上的内容

我希望会发生的是,在点击任何一个块后,任何一行中较小块的总数将为3.

出于某种原因,无论是用户.isotope('resize'),还是正如我所做的那样求助并重新创建同位素,我最终会在顶行中输入一个大于3的数字,因此这些项目的排序不均匀.

我认为这种安排在诉诸之后会有些不稳定.有没有办法让同位素服从装订盒的宽度和高度参数？

使用Jquery,如何查找和隐藏这样的元素？

<p>MyHeader</p>

唯一的标识符是MyHeader,因此尝试查找与此完全匹配的元素并隐藏它们.

编辑:我没有选择添加ids或类选择器,这会让生活更轻松:-)无论如何,我发现jquery包含似乎有帮助!

我正在窥探网站代码并注意到它们的使用@media aural {}- 这让我想起了它的存在。所以，我以为我会玩……但后来意识到我不知道如何测试它们。

我不希望我的网站听起来像施瓦辛格一家在吃圣诞大餐……

我如何通过浏览器测试听觉或语音以确保它听起来不错？

听觉和语音的规格：

• http://www.w3.org/TR/CSS2/aural.html
• http://www.w3.org/TR/css3-speech/

*编辑：感谢 BoltClock 指出 Media aural 已被废弃并替换/升级为 CSS3 Speech。所以，我现在将专注于 CSS3。

如果div中有图像,则隐藏div.但如果图像确实存在,那么我需要保持div可见.

但它不起作用.这是我的代码:

HTML:

<table id="FeatureBox">
    <tbody>
    <tr>
      <td>
        <div id="productInfoGrid">
          <div id="ProductIconsTitle">
            <p>PRODUCT FEATURES</p>
          </div><img width="563" height="337" src="http://www.preserveshop.co.uk/images/black-jam-jar-lid-58mm.jpg" alt="http://www.preserveshop.co.uk/images/black-jam-jar-lid-58mm.jpg" style="cursor: -moz-zoom-in"><div style="clear:both;"></div>
        </div>
      </td>
    </tr>
  </tbody>

JQUERY:

if ($("#div#productInfoGrid:not(img)").length) {
    $("#productInfoGrid").hide();
}

JSFIDDLE:http://jsfiddle.net/wJgpr/3/