小编kth*_*oom的帖子

如何使用jquery连续旋转对象?

好的!这是情况.我有一个jQuery插件,它在我的标题中设置背景图像的动画,以便从左到右不断滚动.我在这个标题上有一个.png的轮子.我需要让轮子随着移动的背景不断旋转.

CSS3-是的我可以使用CSS3,但是使用Internet Explorer的一些可怜的灵魂会在移动的背景上看到一个固定的轮子,这很奇怪.

jQuery插件 - 这就是我想要使用的,但我还没有找到一个会不断旋转图像的插件.大多数只在您激活时旋转一定角度.

如果有人有任何想法,我会很感激!

jquery image rotation css3 web

12
推荐指数
2
解决办法
2万
查看次数

在列中均匀分布元素

我有一个名为div的.wrap项目.未知数量的项目(.thing)应排列成四列(彼此堆叠).

<div class="wrap">
    <div class="thing"> thing1 </div>
    <div class="thing"> thing2 </div>
    ...
</div>
Run Code Online (Sandbox Code Playgroud)

列需要均匀分布,以便没有列为空.这很容易使用:

.wrap {
    column-count: 4;
    column-fill: balance;
}
Run Code Online (Sandbox Code Playgroud)

但是,column-fill我相信,只适用于Firefox.

是否有另一种CSS方法可以在所有最新版本的浏览器中实现此布局?具体来说,flexbox能够在这里提供帮助吗?

请注意,我不能添加额外的div作为列,并且不需要JS解决方案.

这是一个小提琴,除了偶数分布之外还有所需的布局→ http://jsfiddle.net/bpdtkmmt/

html css multiple-columns

11
推荐指数
1
解决办法
5122
查看次数

用each()进行jQuery DOM操作;

我正在尝试使用每个()使用jQuery同时对几个元素进行一些简单的DOM操作.我得到的结果我不明白.

这是一个jsFiddle,它显示了我想要发生的事情VS实际发生的事情:

http://jsfiddle.net/kthornbloom/4T52A/2/

这是JS:

// Step One: Append one blue box within each grey box

$('.grey').append('<div class="blue"></div>');

// Step Two: Make one copy of the red box already there, and place it within the new blue box.

$('.grey').each(function () {
    $('.red', this).clone().appendTo('.blue', this);
});
Run Code Online (Sandbox Code Playgroud)

为什么我会得到我的结果,我怎样才能获得理想的结果呢?

javascript each jquery dom this

7
推荐指数
1
解决办法
226
查看次数

通过jQuery设置CSS counter-increment

我想使用jQuery 在" " 上设置CSS counter-increment属性.demo:before.

问题是jQuery无法访问伪元素.另一个SO答案(我现在似乎无法找到)建议设置数据属性,然后在CSS中使用该值,但这也不起作用.这是可以实现的吗?

简化示例:http://jsfiddle.net/4h7hk8td/

HTML:

<ul class="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

JS:

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);
Run Code Online (Sandbox Code Playgroud)

CSS:

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}
Run Code Online (Sandbox Code Playgroud)

javascript css jquery counter css-counter

7
推荐指数
1
解决办法
1680
查看次数

如何删除ContentEditable中的H1格式(wysiwyg)

除了使用Undo之外,我认为没有办法删除内容可编辑的h1和h2标签.预期的行为是再次单击H1按钮应该关闭它,但它不会.还有一个"删除格式"按钮,但它只适用于粗体,斜体等项目.有没有办法通过JavaScript执行此操作?

编辑:结果必须删除打开和关闭H1标记,而不是用其他任何内容替换它.

请在此处查看简化的测试用例:http: //jsfiddle.net/kthornbloom/GSnbb/1/

<div id="editor" contenteditable="true">
    <h1>This is a heading one</h1>
    How can I remove the header styling if I want to?
</div>
Run Code Online (Sandbox Code Playgroud)

javascript html5 contenteditable

5
推荐指数
1
解决办法
1841
查看次数

将min-height设置为等于width

我有一个流体宽度div,它在另一个块级元素内.

HTML

<div></div>
Run Code Online (Sandbox Code Playgroud)

CSS

div {
    width:50%;
    min-height: /*equal to width */;
}
Run Code Online (Sandbox Code Playgroud)

我希望最小高度设置等于宽度,这样它就是方形,除非内容太多.此时,它应该垂直扩展.这可以用CSS实现吗?

我尝试过的:

  • 使用百分比填充或边距,但这只设置高度,而不是max - height并将内容向下推.

html css height width

5
推荐指数
2
解决办法
3432
查看次数

在中心设计上滚动时固定面板

好的,所以我想使用一个有三个div(布局为列)的布局.外部两个将与导航相关,因此我希望它们在用户滚动时保持原位.中间部分将容纳内容,因此需要与页面正常滚动.

我知道你通常使用position:fixed,但我希望整个设计都集中在页面上.使用固定定位不允许它像在中心设计中那样水平移动.有人知道如何满足所有这些标准吗?

我已经设置了一个jsfiddle来启动它:http://jsfiddle.net/8RqEt/

css

3
推荐指数
1
解决办法
7150
查看次数

如何在动画期间禁用按钮?

我只是试图在动画发射时禁用按钮的点击功能.

请注意,在最终使用中,我使用的是jQuery触发的CSS动画,所以我不能只检查 .is(':animated').

我的解决方案是在动画期间更改按钮上的活动类,但是jQuery似乎没有意识到我已经改变了它.

测试用例:http://jsfiddle.net/Ct2TZ/

HTML:

<a href="#" class="button active">Click Me</a>
Run Code Online (Sandbox Code Playgroud)

jQuery的:

var myFunction = function () {
    $('.button').removeClass('active');
    $('.result').append('clicked<br> ');
    $('.result').animate({
        width: '200px'
    }, 2000, function() {        
        $('.result').css({width: '75px'});
        $('.button').addClass('active');
    });
}

// THIS SHOULD NOT WORK DURING ANIMATION
$('.active').on("click", function () {
    myFunction();
});
Run Code Online (Sandbox Code Playgroud)

jquery

3
推荐指数
1
解决办法
2138
查看次数

如何使用 A-Frame.js 声明“遮罩”材质

我正在尝试制作一个“墙上有洞”的场景。 在此输入图像描述

这需要移除正方形的平面,然后将具有以下属性的材质应用于平面:

  1. 对相机不可见
  2. 隐藏其后面的任何其他对象,使其不被渲染

这里有一个使用 Three.js 的示例,但是我如何使用a-frame 材质语法来做到这一点?

3d three.js aframe

2
推荐指数
1
解决办法
1991
查看次数

设置边缘div以填充剩余宽度

我已经发现了几个已经被问过的SIMILAR场景,但没有一个可以解决这个特殊问题.我希望有人可以提供帮助!

连续三个div.中间div居中,并具有设定的宽度和高度.外部的两个div必须展开以填充窗口边缘和中心div边缘之间的剩余空间.像这样:

http://kthornbloom.com/example.jpg

*注意 - 我想用CSS解决它,但如果需要javascript,那就没问题了

*注意2-这个目的不是为了使中间div居中,我知道有更好的方法可以做到这一点.目的是设计使用背景元素的网站,该背景元素需要是页面的整个宽度,中间除外.

html css layout width fluid-layout

1
推荐指数
1
解决办法
7684
查看次数