我使用此代码滚动到我的页面上的某个元素:
$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);
它的工作原理,但有一个问题,它:当用户向下滚动而滚动剧本了,有一些颤动,因为有在不同的方向上同时有两个滚动命令 - 听起来逻辑性.
我检查了一些具有这种滚动功能的其他网站,没有动摇.那么防止这种情况的诀窍是什么？
我需要检测用户滚动的方向 - "向上"或"向下".基于此答案中的代码:如何确定jQuery滚动事件的方向？
我试图将它包装在一个函数中,因此它有点区别 - 但不幸的是,它不起作用.我认为它与我如何返回值有关,但方向总是"向上".作为JavaScript的新手,我在解决这个问题时遇到了问题.
这是代码:
$(document).ready(function () {
'use strict';
var lastScrollTop = 0,
st,
direction;
function detectDirection() {
st = window.pageYOffset;
if (st > lastScrollTop) {
direction = "down";
} else {
direction = "up";
}
lastScrollTop = st;
return direction;
}
$(window).bind('scroll', function() {
detectDirection();
console.log(detectDirection());
});
});
我也建立了一个小提琴.
你能帮我找一下问题所在吗？
我这里有一个数组:
var myArr = [1, 1, 2, 5, 5, 7, 8, 9, 9];
现在我想删除两个副本的外观.所以期望的结果不是:
var myArr = [1, 2, 5, 7, 8 ,9];
但
var myArr = [2, 7, 8];
基本上我知道如何删除重复项,但不是那种特殊方式.这就是为什么任何帮助将非常感谢!
请注意:我的阵列充满了字符串.这里的数字仅用作示例.
简短的问题:为什么background-color的.b时候我将鼠标悬停不会改变？.a？
CSS
.a {
color: red;
}
.b {
color: orange;
}
.a:hover .b {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
在我们开始之前:
请不要将此作为另一个问题的副本关闭.我刚刚在Stackoverflow上搜索过,但没有找到确切的情况.
最接近的是我相信这个问题.尽管如此,那里给出的回复对我来说并不合适,我相信因为段落已经定下来了position: absolute;.
那是HTML:
<ul>
<li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>
而CSS:
li {
position: relative;
float: left;
overflow: hidden;
}
img {
width: 100%;
vertical-align: middle;
}
p {
background-color: rgba(255, 0, 0, .3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
span {
background-color: rgba(0, 255, 0, .3);
vertical-align: middle;
}
小提琴:http://jsfiddle.net/DpVjZ/
vertical-align: middle;只是将文本从顶部稍微偏移,但实际上不在中间.
设置跨度position: absolute;然后应用top: 50%;然后margin-top: -x%;将无法工作,因为跨度的高度未知,因为它是动态内容.
虽然链接的问题表明这是不好的做法,但我也尝试了这种display: table-cell …
我在我的网页上使用了一些Google网络字体.我使用谷歌提供的代码
<link href='http://fonts.googleapis.com/css?family=Pirata+One' rel='stylesheet' type='text/css'>
在<head>.
看看这个CSS内部显示实际的字体是托管在http://themes.googleusercontent.com.
现在我想使用DNS预取,但我应该使用哪个域？http://fonts.googleapis.com,http://themes.googleusercontent.com或两者兼而有之？
关于HTML页面上的按钮,我有一个非常基本的问题.
众所周知,创造它们有几种可能性.它可以设置display: block;上的a,所以可以分配一种颜色,宽度和高度,以它.但是还有HTML元素button和元素submit.
什么时候用？例如,在创建表单时,如果我没记错的话,我需要一个submit元素.但是当我在表单外面有一个按钮时,我可以正常使用a.但是,我还不知道那么用button.
你能帮我解决这个问题吗？
我在SVG中使用阴影创建了一个投影SourceAlpha,所以它是纯黑色.使用feColorMatrix我减少了不透明度,但仍然看起来不像我想要的那样 - 我希望阴影的颜色与特定的颜色值相匹配.所以我更深入地研究了一下feColorMatrix.
现在我不用SourceAlpha作阴影的来源,但是SourceGraphic.由于我的矢量图像是纯白色rgba(255, 255, 255, 1),我可以像这样计算阴影的颜色:
<feColorMatrix in="the-shadow" result="color-out" type="matrix"
values="0.0157 0 0 0 0
0 0.3059 0 0 0
0 0 0.7765 0 0
0 0 0 1 0 "/>
结果应该是一个深蓝色的影子rgba(4, 78, 198, 1).
实际上这是有效的,我相信计算都是正确的,但是当使用相同的颜色用CSS3创建阴影时,有一个明显的区别:SVG滤镜似乎使颜色有点太亮.有没有办法解决这个问题？
我想在网页上使用一些新的HTML5表单属性和输入类型.有些浏览器已经支持它们,有些浏览器不支持它们.这就是为什么我想使用Modernizr - 这就是我的麻烦开始.
据我所知,Modernizr本身并不是一个polyfill,而是一个可以测试浏览器是否能够使用某些新的HTML5/CSS3的脚本.如有必要,可以加载polyfill,"模拟"这些功能,以便它们可以在非支持/旧版浏览器中使用.这是正确的我猜？
关于测试/装载:使用Modernizr加载polyfill的正确或最佳方法是什么？
在文档中我发现了这个:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
但是有些页面也是这样的:
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
另外,我如何才能真正了解如何检测这些功能？Modernizr.geolocation对于每个特征检测,肯定存在某些东西吗？
在Modernizr GitHub存储库中,还有许多用户贡献的功能检测.如何在我的Modernizr版本中实现这些？或者只是使用他们的建设者是最好的？
在Safari中,HTML5表单验证有效,但没有用于显示错误消息的UI.基本上,该功能只实现了一半.这就是为什么Modernizr在Safari中给出了误报,就像在这里已经提到的那样:https ://github.com/Modernizr/Modernizr/issues/266 显然有人用这样的自定义测试来解决这个问题,但我仍然不明白如何使用它.1
我在使用标签嵌入的 SVG 文件中使用投影滤镜img。在我的 MacBook 上，Safari 浏览器看起来不错。然而，在移动版 Safari 中，图形变得非常像素化，并且失去了所有清晰度。未应用滤镜时，SVG 渲染效果良好。除了通过过滤器之外还有什么办法可以解决这个问题吗？