Tag: css3

强制CSS转换在JavaScript函数中多次更新

我知道如何让CSS转换工作,但在这种情况下,我想知道为什么 getComputedStyle()不会更新right类。 这里是使用getComputedStyle()方法强制重新计算样式的引用: jQuery addClass方法链接以执行CSS转换 它工作的一个例子: http : //jsfiddle.net/j8x0dzbz/8/ 现在这里是我的小提琴不起作用: http : //jsfiddle.net/me8ukkLe/12/ 这是我的代码: $(‘button’).click(function() { $(‘div div’).eq(0).addClass(‘right’); window.getComputedStyle(document.getElementById(‘blue’)).left; // FORCE “right” CLASS $(‘div div’).eq(0).addClass(‘left_zero’); }); #container { border: 1px solid purple; position: absolute; height: 12px; width: 12px; } #blue { background-color: blue; } button { margin-top: 30px; } div div { position: absolute; width: […]

jQuery循环插件分页+ CSS3PIE

我正在使用jQuery循环插件进行图像幻灯片放映。 使用圆形子弹作为寻呼机(因为现在它似乎风靡一时)。 除IE之外,这在“现代”浏览器中完美运行。 它扰乱了寻呼机上的activePagerClass。 因为IE不能做border-radius,所以我使用了CSS3PIE行为。

在响应式设计中,将“top”和“bottom”的边距设置为“right”和“left”的边距

我有一个容器div,它有动态宽度,它会根据屏幕分辨率而变化。 在这个div里面我有另一个固定高度和宽度的元素。 我可以给这样的元素一个margin: 0 auto; 并在中间水平对齐,但是这个技巧不能在中间垂直对齐,因为容器div的高度保持不变(它不是固定的高度,它取决于div内的内容)。 因此,当用户更改分辨率时,我想以某种方式应用相同的边距,如左右,上下。 因此,各方应该有相同的动态保证金? 拥有基于CSS的解决方案会很好,但如果不可能,jQuery也是好的。 基本上我需要的是计算右侧或左侧的边距并将这些值应用于顶部和底部边距。

如何在动画结束时创建活动?

1 – 动画结束时如何创建事件? 用css3写的动画 2 – 如何仅在浏览器中加载所有数据时播放动画? 你可以看到 许多Thx。 演示jsFiddle

鼠标hover和鼠标输出function在下拉菜单中

HTML lorem 123 123 123 321 123 123 SHOW HIDDEN MENU 7 6 5 4 0 Scroll header text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus possimus ab adipisci sit tenetur assumenda cupiditate iure modi minus repellat corrupti reiciendis sapiente sunt porro autem temporibus impedit quaerat perspiciatis? Unde consectetur vitae consequuntur error rerum […]

CSS flex最后一个不完整的行项占用完整行项的宽度

我正在创建一个flexbox; 容器具有max-width ,例如max-width = 500px ,子项目每个都具有min-width: 130px和flex-grow: 1以填充整个行空间。 这是小提琴: https : //jsfiddle.net/7wroxkhj/6/ 我想要实现的是,对于最后一行项目采用相同宽度的前面项目。 即:项目#7和项目#8具有从1到6的相同宽度的项目。 我怎样才能做到这一点? 更新: 欢迎JS解决方案!

jQuery UI – Draggable元素在旋转时会丢失约束

我在这里创建了一个jsFiddle以在代码中说明我的问题(双击粉红色元素并尝试在蓝色框外拖动,再次双击并比较结果)。 问题: 当我在带有约束的可拖动元素上旋转CSS时,约束不能按预期工作。 可拖动元件可以部分地拖到容器外部。 我的猜测是它与CSS旋转的工作方式有关,但我不确定。 有没有办法解决这个问题?

这个CSS不应该在IE9中工作吗?

我有一个我正在旋转的div。它可以在每个现代浏览器中运行,但IE的代码似乎不起作用。 #box { width: 400px; height: 400px; display: inline-block; position: absolute; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transition: all 0.8s 1s ease-in-out; -webkit-transition: all 0.8s 1s ease-in-out; -moz-transition: all 0.8s 1s ease-in-out; -o-transition: all 0.8s 1s ease-in-out; opacity:0; } #box.animate { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); […]

jQuery绑定到css3转换发生

到目前为止,在我的研究中,我发现的唯一css3过渡事件是transitionEnd。 我想要做的是将一个javascript函数绑定到一个元素,以便在转换发生时不断重新触发。 想想$(window).resize但是对于使用css3转换resize的元素。 这可能吗? 我发现没有transitionStart,transitionAnimation或任何其他可以让我检测,转换开始或转换发生的时间。 我更喜欢jQuery的绑定,但其他方法都很好。 此外,这需要在FF,Chrome,Safari和Opera中使用。 谢谢大家!

JQuery移动底层空间

我正在创建我的网站的移动版本,它在页面底部有一个巨大的空间。 我尽我所能去除它但它甚至没有膨胀。 有关如何解决此问题的任何建议。 这是链接 我尝过类似的东西 body { margin-bottom: -25px;} 它仍然无法正常工作。