Tag: css3

基于滚动的动画在定义区域之外工作: 所以我是JS的新手。我试图让滚动动画只在指定区域工作，但我的“position：fixed”标签使它出现在我的网站顶部并一直滚动它而不是动画开始和仅在其定义的框架中工作。我有什么想法可以解决这个问题？这就是它的样子（这是钢铁侠头盔，请原谅未完工的网站）： http ： //frontlinecreative.co/test-page/ 这是我正在使用的代码： $(document).ready(function() { //variable for the ‘stroke-dashoffset’ unit var $dashOffset = $(“.path”).css(“stroke-dashoffset”); //on a scroll event – execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($(“html”).height() – $(window).height())) * 100); //convert dashoffset pixel value to interger var $newUnit […]

获取可见Div的ID，在所有方法中都失败: 我试图得到我的第一个旋转轮的可见Div ID，总是得到值为0.我想要可见部分的确切ID。任何帮助，将不胜感激。$（ “div.slot”）否（ “：隐藏”）丙（ “ID”）; 使用上面的代码，但我得到的结果。 //note parseInt //note stop var person = [‘Mom’,’Dad’,’Friend’,’Teacher’]; var situation = [‘Driving’,’Walking’,’chatting’,’Watching’]; var clicks = true; var spinCount = 0; var lifeCount = 4; function go(){ addpersonSlots($(“#slots_a .wrapper”)); moveSlots($(“#slots_a .wrapper”),’a’); addSituationSlots($(“#slots_b .wrapper”)); moveSlots($(“#slots_b .wrapper”)); } $(document).ready( function(){ addpersonSlots($(“#slots_a .wrapper”)); addSituationSlots($(“#slots_b .wrapper”)); } ); function addpersonSlots(jqo){ for(var i […]

将表td分成6行或更少的行的解决方案: 寻找一个css或jquery解决方案将这些动态加载的表分解为每行最多6个，创建表的脚本将它们全部内联，有时最多32个td.tables显示在一行中。我如何打破它们只有最多6个显示内联这是HTML

在活动bg上添加淡入淡出效果: 我有一个菜单结构： creativ< creativ 我每个.active类添加背景图像： #nav li.active a{cursor:default; background:url(images/nav-li-a_hover.png) no-repeat bottom center; padding-bottom:5px;} 它的工作原理。但是当我点击菜单项时，我想要获得具有淡入淡出效果的背景图像。我怎么能通过jQuery或CSS3做到这一点？

当它滚动到另一个HTML元素时，动态地将CSS类添加到固定DIV: 我在StackOverflow上阅读了几个类似的问题，唉，没有一个解决方案对我有用。我想动态地向html元素添加一个css类，当它向下滚动页面经过另一个html元素时，当用户向上滚动页面时删除该类。具体来说，我想改变位置：固定DIV元素到位置：绝对当它到达页脚div的顶部时，这样有效地DIV元素停止固定到屏幕的底部并粘在页脚的顶部div，以便它保持在那里，同时用户继续向下滚动页面的其余部分。我尝试调整几个JavaScript代码片段，但没有一个按照我想要的方式工作。这是我最好的尝试： $(function() { var menu = $(‘#fixedbtn’); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= $(‘#footer-1’).offset().top) { // check the offset top menu.addClass(‘fixedPosition’); } else { // check the scrollHeight menu.removeClass(‘fixedPosition’); } }); }); 我想在#fixedbtn div中滚动超过＃footer-1 div的顶部时添加类“fixedPosition”，并在用户向上滚动时删除该类，以便＃footer-1退回离开视口底部。在这种情况下，使用页面顶部的固定像素距离对我不起作用。我想要事件触发器，当 div的顶部出现在用户的屏幕底部时，会将该类添加到div中。你们，代码诗人，能否指导我找到实现预期结果的正确解决方案？

如何围绕徽标创建三个元素的轨道: 我是新手，我正在进行第一个项目：我有三个元素（图像）和一个标志。当我点击图像时，这一个和另外两个应该围绕徽标在360°的轨道上移动（当它们在徽标背面时具有低z-index，因此它们可以消失然后再出现）。这有可能与jquery和css3？

如何使下面的代码无限翻转？: 如何调整此链接中的翻转javascript http://desandro.github.io/3dtransforms/docs/card-flip.html以便它将翻转到第三个内容或不会引用翻转到第一个内容 var init = function() { var card = document.getElementById(‘card’); document.getElementById(‘flip’).addEventListener( ‘click’, function(){ card.toggleClassName(‘flipped’); }, false); }; window.addEventListener(‘DOMContentLoaded’, init, false);

css3和jquery加载页面滑块效果: 嗨我正在尝试使用css3和jquery创建一个完整的页面加载滑块效果。为此，我使用两个div来加载页面。我有前一个，后一个和下一个按钮。我有下一个效果的问题。当我点击下一个按钮时，我现在用translateX（’100％’）将新页面加载到div 2中。然后我将translateX（’ – 100％’）添加到div1（此时屏幕上的translateX（’0％’））。效果应该是translateX（’ – 100％’）div1，然后是div2的translateX（’0％’）。所有翻译都是1.0s的过渡。这很有效。但是，当我再次点击下一个按钮时，div1与translateX（’ – 100％’），（在左边，在屏幕外），所以我用translateX（’ – 100％’）删除了类，并用translateX添加另一个类（’100％’）过渡期。然后我删除这个类并添加另一个带有translateX（’0％’）的类，转换为1.0s。我为div2删除了带有translateX（’0％’）的类，并使用translateX（’ – 100％’）添加另一个向左移动。但这不起作用。 div1由屏幕左侧而不是右侧进入。任何的想法？ CSS .to-next { transform: translateX(100%); } .to-screen { transform: translateX(0%); transition-duration: 1.0s; } .to-left { transform: translateX(-100%); transition-duration: 1.0s; } HTML JavaScript $(‘#ajax-inserted2’).removeClass(‘to-screen’).addClass(‘to-left’); $(‘#ajax-inserted1’).removeClass(‘to-left’).addClass(‘to-next’).removeClass(‘to-next’).addClass(‘to-screen’);

Bootstrap 3 mouseover图像响应: 针对Bootstrap 3的响应式图像鼠标hover是否有任何解决方案？这是我的代码： http ： //jsfiddle.net/4gac7/ .image{ background-image:url(“http://placehold.it/350×150/000/fff”); width:350px; /* responsive possible ?? */ height:150px; } .image:hover{ background-image:url(“http://placehold.it/350×150/ccc/fff”); } 谢谢！

如何随机翻转Div: 我创建了一个应用程序，其中所有div在hover时垂直翻转。我想让它随意而不hover。我该怎么做？ CSS .vertical.flip-container { position: relative; float: left; margin-left: 50px; } .vertical .back { transform: rotateX(180deg); } .vertical.flip-container .flipper { transform-origin: 100% 50px; } .vertical.flip-container:hover .flipper { transform: rotateX(-180deg); } .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back […]