Tag: css3

即使在制作动画时也始终将条形图粘贴到页脚

最近在这里,我问了一个问题,就是将一个bar元素始终放在容器的左下角。 似乎不可能只使用CSS。 所以,我最终使用了javascript。 这是工作小提琴 提供上一个问题的亮点: 将条形元素粘贴到容器的左下角 条形应位于左下方,即使容器垂直或水平滚动。 如果存在水平滚动条,则栏应该越过水平滚动条。 即使窗口resize,以上小提琴也可以正常工作并遵守上述所有情况。 现在,我有相同的情况,但容器将resize,因为动画按钮单击但不调整窗口大小。 因为,我动画了一秒钟,所以当我点击动画按钮时,我调用窗口resizefunction中的相同代码。 但这样做是某种程度上打破,并没有遵循上述规则/要求。 这是小提琴 。 ( 不工作 ) 请帮忙。 PS:这是上一个问题的链接。 ( 如果有人想要简短的理解 )

如何在jquery传输中暂停和重新启动css3转换

我正在使用jquery中转移动和元素。 我想暂停动画并单击按钮继续播放。 但我无法弄清楚如何做到这一点。 JSFiddle: http : //jsfiddle.net/b4hwq/2/ 我确实试过了 stop().transition({}); 但这是一个错误。

JQuery Validation插件submitHandler对我不起作用

您好我得到以下问题我的以下代码对我不起作用,我无法弄清楚为什么。 我希望你们能帮助我。 编辑:提交处理程序根本不会被调用。 我甚至没有得到警报信息。 我想禁用提交按钮,直到表单被validation。 $(‘form’).validate({ onsubmit: true, debug: true, errorLabelContainer: “#errorBox”, rules: { user_email: { minlength: 4, email: true, required: true }, user_textField: { minlength: 3, required: true }, user_phone: { required: true, number: true, minlength: 4 }, user_fax: { number: true, minlength: 4 }, user_plz: { required: true, number: true, minlength: 5 } […]

如何创建与背景渐变和重叠透明形状一起使用的嵌入曲面背景?

我一直试图用CSS创建一个看起来像下图的网页部分。 我无法弄清楚如何在背景的顶部和底部创建曲线并保持透明覆盖的完整性。 上面和下面的部分(部分显示)也使用透明背景。 所以,你会看到圆圈有不同的阴影。

在jQuery中替换图像扩展,动态从.png到.gif

所以,我正在使用CSS3在我的网站设计中创建侧边框,这很好用,花花公子。 使用http://css3pie.com以在IE中创建效果。 再次,好看和花花公子。 现在,我的问题来了 – 对于每个相对定位的模块,其中有一个绝对定位的图标,设置为顶部:-20px以便为其提供弹出效果。 显然这在IE6中不起作用,并且它对任何PNG修复代码都不起作用。 但是,对于IE6用户,我可以切换到低质量的gif,他们可以处理它。 现在,我的问题是,如果用户使用IE6,如何设置live-switch image.png到image.gif? 我还没有为这个想法找到合理的解决方案。 我可以使用IE6样式表来替换图像 – 但是有几个图像不应该基于CSS的实例。 它们应该是正确的图像。 有什么建议? 我想要某种jQuery替换,但我也没有找到合理的解决方案。

设置后更改owl carousel 2选项?

我正在寻找更具体的设置之后更改owl carousel 2选项。 我正在寻找一种方法来禁用拖动元素的父元素拖动,如下所示: $(‘#carousel’).on(‘drag.owl.carousel’, function(event) { $(‘.carousel’).on(‘drag.owl.carousel’, function(event) { //disable drag }) }) $(‘#carousel’).on(‘dragged.owl.carousel’, function(event) { $(‘.carousel’).on(‘dragged.owl.carousel’, function(event) { //enable drag }) })

JQuery – 如何测试输入元素是否应用了有效或无效的伪类?

你可以测试一个输入元素是否具有CSS3应用的CSS3:valid或:invalid伪类? 我想在启用提交按钮之前测试表单元素是否通过了CSSvalidation。 我尝试过的东西不起作用: if($(“#el”).is(“:valid”)) { //… } if($(“#el:valid”).length == 0) { //… } $(“#el”).attr(“valid”)

按宽度排列Bootstrap Carousel项目。

我们安排一些div的内部bootstrap轮播项目。 请看这个 .item{ padding:10%; } .inner{ float:left; margin:10px; border:1px solid black; width:26% } .carousel-control{ width:4%; } 1 2 3 4 5 6 7 8 9 10 11 12 Previous Next 当窗口调整到360px宽度时,div 3进入第一个轮播。 但每次我们只需要在一个caurosel中显示一行项目。 即,当窗口调整为360px div 3显示在第一个旋转木马itme,但我们需要显示在第二个旋转木马项目。 有没有办法做到这一点? 即:每当我们需要在一个轮播项目中显示第一行div时,另一个内部div需要根据宽度自动移动到下一级别。

jQuery slide li离开了

我正在制作一个幻灯片查看器,显示的ul中有5个lis。 如何使用j查询在li上向左滑动,这样左边的li就不再显示了,其中一个未显示?

为什么Chrome无法正确处理jQuery添加的flexbox项目?

我正在研究一些基本的flexbox代码,当我注意到当我添加flex项目并且容器的方向设置为column或column-reverse时,Chrome显示奇怪的行为。 这是一个简单的flexbox示例,其中的方向正确,方向设置为列并包装: #flexbox_container { border: 8px solid #ccc; padding: 10px; height: 200px; display: flex; flex-direction:column; flex-wrap: wrap; } .flex_item { background: #eee; margin: 4px; padding: 10px; } Item Item Item Item Item Item Item 正如所料,当列数过大而不适合容器时,会创建第二列,每个项具有相等的宽度。 现在这是问题的一个例子。 如果我们从一列的儿童弹性项开始,并使用jQuery继续添加更多,而不是像上面那样均匀划分,第一列占据整个宽度,新项目向侧面推出: $(‘button’).click(function() { $(‘#flexbox_container’).append(‘Item’); }) #flexbox_container { border: 8px solid #ccc; padding: 10px; height: 200px; display: flex; flex-direction: column; […]