Tag: css3

使用jQuery交叉淡入淡出背景图像

我希望通过hover元素来交叉淡化/过渡背景图像。 有可能吗？ 我有一个具有背景图像的DIV元素，但当您将其hover时，背景图像会随着过渡/交叉渐变效果而变化。 在我的样式表上，我为hover状态指定了一个类。 这是DIV的正常或非hover状态。 #crossfade DIV{ width: 100px; height: 100px; background-image: url(‘img/bg.jpg’); } 下面是DIV的hover状态类。 #crossfade DIV.hovered{ background-image: url(‘img/bg-1.jpg’); } 然后我的jquery脚本如下： $(function(){ $(‘#crossfade’).find(‘DIV’).hover(function(){ $(this).addClass(‘hovered’); }, function(){ $(this).removeClass(‘hovered’); }); }); 我的脚本只需简单切换背景图片。 现在我想要的是给它一个过渡效果或更像fadeIn / fadeOut效果。 就像之前的背景图像渐渐消失一样，下一个背景图像也会逐渐消失。 知道怎么做吗？ 可能吗？ 谢谢 ：）

点击它时，像按钮一样动画

我想要像Twitter的Like按钮这样的动画。 我从Twitter上截取了截图。 这是动画中的一些图像： 1： 2： 3： 你知道任何好的jQuery库或CSS3库来使用这样的动画吗？

使用Fabric.js绘制符合标尺的一致线长度

我有一个水平可滚动的div，它包含另一个div（id标尺）和一个canvas。 在canvas上，我画的是一条水平线，它的长度不同。 我需要绘制线条，以便长度始终可以衡量使用标尺div中使用javascript和css渲染的标尺： var canvas = new fabric.Canvas(‘canvas’); line_length = 14000; adjusted_length = line_length / 6.367; canvas.add(new fabric.Line([100, 100, adjusted_length, 100], { left: 30, top: 50, stroke: ‘#d89300’, strokeWidth: 2 })); $(‘#canvas_container’).css(‘overflow-x’, ‘scroll’); $(‘#canvas_container’).css(‘overflow-y’, ‘hidden’); drawRuler(); function drawRuler(){ $(“#ruler[data-items]”).val(line_length / 200); $(“#ruler[data-items]”).each(function() { var ruler = $(this).empty(), len = Number($(“#ruler[data-items]”).val()) || 0, item = $(document.createElement(“li”)), […]

Phonegap：构建转换后，透视CSS属性不起作用？

我正在使用JQuery mobile制作应用程序。 对于滑动事件，我包括一个库。通过使用它我可以使用swipeleft，swiperight，swipeup和swipedown事件。 我已经在Android 4.0,4.1,4.2和 android 4.4的chrome浏览器中测试了我的应用程序。它的工作原理。 CSS #joy_div { perspective: 500px; } button { margin: 10px 0 0 0; } .left, .right, .down, .up, .reset { transition: transform 0.5s ease; transform-origin: 50% 50%; } .left { transform: rotateY(-40deg); } .right { transform: rotateY(40deg); } .up { transform: rotateX(-40deg); } .down { transform: rotateX(40deg); } […]

Swiper无法在Jquery Mobile中工作

我正在使用带有Jquery Mobile 的idangero.us的Swiper … 在这里我使用Scroll Container Swiper作为内容滑块…… 只是面对将代码嵌入到一起的很多问题…… http://jsfiddle.net/keuKu/4/embedded/result/ 滚动条没有显示为演示中的滚动条，滚动条也没有粘贴到我留下的标记处… $(function(){ /* Scroll container: */ var sScroll = $(‘.swiper-scroll-container’).swiper({ scrollContainer : true, scrollbar : { container : ‘.swiper-scrollbar’ } }) })

使用javascript在css3中获取@keyframe当前值

请参阅此处的演示： http ： //jsfiddle.net/hamidrezabstn/fgcPa/5/ 当我点击中间的雨滴时，我希望它旋转到旋转圆圈的当前位置！ 我尝试下面的JS代码，但它不起作用！ 接下来我要做的是用旋转圆圈旋转雨滴！ $(function() { $(‘#center’).click(function() { var pos = $(‘#circle’).css(‘transform’) $(this).css(‘transform’, ‘pos’) }); });

父div中的中心3 div

我试图将3 div放入父div而没有结果。 请问你能帮帮我吗 ？ HTML： CSS： #container { text-align: center; } #left, #middle, #right { width: 200px; float: left; background: red; height: 90px; } 结果：

dataTables – 无法获得水平滚动和固定列来完成它们的工作。 似乎在各处呈现不同。 我究竟做错了什么？

我花了两个小时试图解决这个问题。 我需要创建一个几乎与此链接上显示的表相同的表： https://datatables.net/extensions/fixedcolumns/ 它在垂直和水平方向上滚动，同时保持柱子固定在侧面。 最后，我想把正确的列固定而不是左边，但这不是我现在的问题。 我的问题是，尽管有function的.js，它对列进行排序并且几乎完成它应该做的一切，甚至使用相同的CSS，中间容器 – 应该水平滚动的容器 – 不会。 垂直滚动工作得很好。 它显然在示例中工作，并且.js几乎应该在构建表后处理所有内容。 现在，我只想在尝试从左列切换到右列之前让它工作。 如果你可以同时帮助我，那就更好了，但正如我所说的，不是目前至关重要的。 http://jsfiddle.net/biggest/WCpYx/6/ //jquery $(document).ready( function () { var oTable = $(‘#example’).dataTable( { “sScrollY”: “300px”, “sScrollX”: “100%”, “sScrollXInner”: “150%”, “bScrollCollapse”: true, “bPaginate”: false } ); new FixedColumns( oTable ); } ); //HTML Rendering engine Browser Platform(s) Engine version CSS grade Rendering engine Browser […]

使用jQuery / HTML5为圆圈设置动画

对于个人项目，我正在制作一个计时器应用程序（用于控制扑克盲人时间表）。 我知道市场上已经有几种解决方案，但由于原因太长而无法进入，我们需要一个定制的系统。 尽管最终用户最终可以定义系统的输出模板，但我们希望包含一个小部件，该小部件显示随着时间倒计时动画的圆圈。 这是一个工作示例的说明，显示了黄色圆圈以及我们想要实现的目标（或者类似的东西）： 我的问题是，如何使用jQuery或原始HTML5 / CSS3动画编码动画如下所示？ 这是使用jQuery的Web应用程序，因此我没有其他库选项可供使用。 高级谢谢！

是否可以在Javascript中的css3转换期间获取目标css属性值？

我有两个divs 绝对定位 ，我将它们相对于彼此定位。 当一个width改变时，我重新计算并设置位置。 当我在’ width ‘属性上使用css3过渡时，当我尝试获得动画的’ width ‘时，它会给我dom上的当前值。 但我希望在转换效果开始时获得转换的目标值以正确设置位置。 这可以通过javascript或其他方式获得目标值吗？ 编辑 下面是一个jsfiddle演示我的问题。 它提醒’100px’，但我需要’300px’。 http://jsfiddle.net/Mdbgs/ 谢谢。