小编use*_*665的帖子

使用css和javascript将div翻转180度

我想使用触发css动画的javascript函数将div翻转180度.我的div有以下声明:

.start-photo-thumb
{
    position: relative;
    float: left;
    background: #444444;
    height: 192px;
    width: 192px;
    margin-right: 10px;
    margin-bottom: 10px;
    perspective: 1000px;
    animation: rotating 0.6s linear infinite;
    animation-play-state: paused;
}

@keyframes rotating 
{
    from
    {
        transform: rotateY(0deg);
    }
    to
    {
        transform: rotateY(180deg);
    }
}
Run Code Online (Sandbox Code Playgroud)

我想我的尝试是错误的.

function flipPhoto(box)
{
    $('#' + box.id).css('animation-play-state', 'running');

    setTimeout(function(){
        $('#' + box.id).css('animation-play-state', 'paused');
    }, 600);
}
Run Code Online (Sandbox Code Playgroud)

另外我想在你看不到div时(90度或300ms)改变背景图像.

有没有更好更简单的方法来解决这个问题?提前致谢!

javascript css jquery css-animations

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

创建牛奶杯效果,如iOS 7或Windows 7

我的网站上有一个标题块,它有一个坚实的背景色,不透明度为75%.这个标题块有一个固定的位置,如果我向下滚动,内容在这个块后面几乎看不到 - 这是我的意图.但现在我还想模糊标题块后面的内容.

我见过这个技术演示:http://codepen.io/Edo_B/pen/cLbrt

基本上它提供了我需要的东西,但最大的缺点是,这只适用于webkit浏览器.

我还检查了blurjs,它只能让我模糊背景图像.

你知道如何解决这个问题吗?

html javascript css jquery css3

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

另一个用户按键jQuery按键事件等待0.5秒

我正在为我的网站开发一个实时搜索,我想用一些简单的jQuery减少一些不必要的请求(当然我有一个后端泛洪控制).我的搜索字段有一个keydown-event-listener.如果val().length> = 3,则此侦听器currenty仅触发php搜索功能的ajax命令.

但现在我想要一个额外的条件.因此,当长度> = 3时,如果用户正在执行另一次按键,我想等待大约0.5秒左右.如果他这样做,则不应该调用该函数,并且我希望监听器再等待0.5秒并再次等待更多用户输入,依此类推.我如何实现这样的功能?

javascript jquery events keypress javascript-events

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

Bootstrap单选按钮预先选择

我正在使用Bootstrap进行新项目,我即将用它构建一个表单.我用JS创建了两个单选按钮('是'和'否')(参见此处的示例),现在我想预先选择其中一个单选按钮.我已经尝试过:

selected = "selected"
Run Code Online (Sandbox Code Playgroud)

checked = "checked"
Run Code Online (Sandbox Code Playgroud)

但按钮没有突出显示.您只能在源代码中看到该属性,而不能在GUI上看到该属性.这是我为按钮所做的(从示例中获取):

<div class="form-group col-lg-4">
    <label for="commentsAllowed">Comments allowed</label>
    <div class="input-group">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="options" id="option1"> Yes
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option2"> No
            </label>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

你知道我怎么解决这个问题吗?提前致谢!

radio-button twitter-bootstrap

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