Tag: css

使用jQuery / Javascript向上或向下滚动整页高度

我目前正在开发一个网站,在滚动function方面需要类似的东西: http : //www.apple.com/iphone-5s/ 在提出这个问题的过程中,我上传了一部分网站 – http://www.bnacademy.com.au/ 我仔细查看了该网站的(苹果)代码,当然,正如我应该怀疑的那样,它是空的。 我正在寻找一种方法可以滚动浏览整页div(带有背景图像),滚动到下一个div就可以通过鼠标进行单个向上/向下滚动。 我已经处理了动态的全页div,我几乎甚至没有滚动function,但它只是没有按照我的预期工作,我已经花了几天时间。 HTML: CSS: .homesPosition { top: 100%; } .splashPage { background: black; z-index: -200; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #containerHomes { z-index: -200; width: 100%; height: 100%; position: absolute; left: 0; background:url(../img/background-placeholder.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: […]

如何在JavaScript中将px转换为vw?

我想在JavaScript中将px转换为vw ,我该怎么办? 我一直在寻找它,但我没有找到任何东西。 所以, 1px→? VW 谢谢。

使用Owl Carousel 2.0显示下一个和上一个项目的一部分

我正在使用Owl Carousel 2.0 。 我想显示前一项(左侧)的一个项目,一半(或更少)以及下一项目(右侧)的一半(或更少)。 只是把它们的一部分放在右边和左边: 我一直在尝试使用CSS(使用owl-stage-outer padding和margin负)但显然Javascript会覆盖它们。 到目前为止,这是我的代码: $(‘.owl-carousel’).owlCarousel({ loop: true, margin: 10, nav: true, responsive: { 0: { items: 1 }, 600: { items: 3 } } }) .owl-carousel .item h4 { color: #FFF; font-weight: 400; margin-top: 0em; } .owl-carousel .item { height: 10em; background: #4DC7A0; padding: 1em; } .wrapper { width: 40em; […]

jQuery – 设置div的最小高度

对大多数人来说这可能很容易。 但我需要一个小片段来查找div的当前高度(div具有基于其内部内容的动态高度),然后在css类的min-height值中设置该值。 基本上这意味着我希望这个容器的最小高度与它的当前高度完全相同。 这可能很快:)

JQuery不在$(document).change()上执行

我需要在页面/文档发生变化时执行一些JQuery – 在这种情况下,当显示具有特定CSS类的div时。 我有以下JQuery代码: $(document).change(function () { if ($(‘.validation_errors’).length) { alert(“test”); } } 但是,它不会执行并显示警报。 我在这里错过了什么吗?

预加载隐藏的CSS图像

我正在开发一个基于jquery的主页,其中包含5个左右的隐藏div,每个div包含几个背景css图像。 问题是浏览器不会将css图像加载到DOM中,直到显示父图层的可见性,导致图像在图层变得可见时缓慢加载。 我已经考虑过的解决方案: CSS sprites(为此重新设计太多工作,并且在显示/隐藏div时不会真正起作用) 这个jQuery插件自动加载CSS背景图像(根据许多其他人的报告,对我来说根本不起作用)。 通过js预加载图像: $(function() { function preloadImg(image) { var img = new Image(); img.src = image; } preloadImg(‘/images/home/search_bg_selected.png’); }); 这个解决方案似乎将图像加载到dom中两次…一旦js加载它,然后再次加载它的div层变得可见…所以它进行2次HTTP调用,因此不起作用。 我缺少这个问题的任何其他解决方案?

Select2中的可选optgroups

我想用缩进创建多级select2选项,但我不想为此使用optgroup元素,因为我想允许选择主要类别。 如果是select2,有什么方法可以设置样式吗? 我的原始HTML选择如下所示: Option 1 Suboption 1 Suboption 2 Suboption 3 Option 2 … $(“.js-select-multiple”).select2({maximumSelectionLength: 5}); 所以不使用Select2我可以将text-indent属性添加到.l2类。 但是,似乎Select2不使用那些用于选项的类,因此设置这些类的样式将不起作用。 那有什么解决方法吗?

jQuery和css:使用某个css类隐藏/显示选择选项

在html代码中我选择了这样的选项: Value1 在jQuery中: var cod = $(this).val(); // This is the value of another select: when the value $(“option[class^=myclass]”).hide(); $(“option[class^=myclass]”).each(function () { $(“option[class^=myclass” + cod + “]”).show(); }); 编辑 我有两个选择。 当我在第一个选择中选择一个值时,必须相应地填充第二个值(我必须阻止ajax调用)。 我将所有第二个选择值放在会话var中,但我的问题是只选择那些与第一个选择相关的值,所以我试图通过css类。 EDIT2 Choose… Value1 Value2 Value3 Choose… Value11 Value12 Value13 Value21 Value22 Value23 Value31 Value32 Value33 EDIT3 对我来说,绿色的解决方案是好的,但IE上有一个问题,我没有成功解释:当我使用后退按钮时,用户选择的值是“丢失”,也就是说,如果我登录控制台的用户选中的值,我在新的克隆选择中看到它的“索引”。 在html源代码中,有整个原始选择。 EDIT4 我解决了这篇文章 https://forum.jquery.com/topic/jquery-select-box-selectedindex-problems-in-internet-explorer-ie-on-refresh-and-back-buttons

如何在段落末尾添加阅读更多链接?

我试图添加一个链接来阅读段落末尾的更多文本。 我希望这个链接在最后的段落中显示如下: 我希望段落附加…和阅读更多链接。 现在我不希望阅读更多链接做任何事情,因为一旦我得到链接,我将添加自己的function。 我只是在努力寻找一种让链接看起来像这样的方法。 我一直在看下面的jquery脚本,但是这似乎对字符数有效,并且无论字符限制是什么都会切断最后一个字,然后不显示我想要的方式(链接出现在段落下面) 。 它还包含一个函数,用于单击链接时发生的事情,由于我缺乏jquery的能力,我一直没有成功编辑。 $(function(){ /* to make sure the script runs after page load */ $(‘.customer_experience’).each(function(event){ /* select all divs with the customer_experience class */ var max_length = 250; /* set the max content length before a read more link will be added */ if($(this).html().length > max_length){ /* check for […]

jQuery CSS:动态更改类的属性

我想更改一个类的属性,在该类的属性中,所有使用该类的元素将用于其余的Web应用程序生命周期(从使用开始直到用户退出Web应用程序)将受到影响。 HTML: What? Now? CSS: .myClass{ background-color: #ffff00; } JS: $(“.myClass”).css(“background-color”, “#00FFFF”); $(“p”).last().after(“Now!”); 这是一个样本 我想从示例中实现的是,所有后续动态添加的myClass都将具有new属性。 从jsFiddle中,您将看到下一个添加的元素没有新属性。 更多: 我只是使用颜色作为基础,我将以更大的规模实现它,我想要完成的是动态更改将用于整个Web应用程序生命周期的类的属性。