我有一个视频模块,使用启动画面和点击,显示屏幕大小667 +的全屏视频.我希望在结束视频后将其反转为动画,以便返回到启动画面.我不确定从哪里开始或者这是否可行.任何帮助表示赞赏!

    $(function(){

    var $parent = $('.video-hero'),
            $video = $parent.find('iframe'),
            $playButton = $(".play"),
            $itemsToFadeOut = $(".vid-cap, .ghost"),
            f = $video[0],
            url = $video.attr('src').split('?')[0],
            activeVideoClass = "video-started";

            // setup fitVids
            $parent.fitVids();

            // handle play click
            $playButton.click(function(e){

                e.preventDefault();

                // grab height of video
                var videoHeight = $video.height();

                // add class to hero when video is triggered
                $parent.addClass(activeVideoClass);

                // fade out the play button
                $(this).fadeOut("fast");

                // fade out poster image, overlay, and heading
                $itemsToFadeOut.fadeOut();

                // toggle accessibility features
                $video.attr({
                    "aria-hidden" : "false",
                    "tabindex" …

过去两天我一直在尝试这个,似乎无法找到解决方案..

我有上一个和下一个箭头用于导航(以及箭头键).但是现在我有一个时间轴,我似乎无法使用div-id(正确)跳转到'幻灯片'？

例如,如果我想从第1部分到第5部分,我希望能够点击我的第5部分按钮并跳转到该幻灯片.

这是我的工作范例.幻灯片的时间轴显示在幻灯片2+上.例如,我只在目标部分工作.

这是我用来"跳转到幻灯片"的代码:

$('.slideshow-timeline a').click(function() {
    var target_id = $(this).attr('href');
    removeClasses();
    $($(".tour-panel")[current]).addClass("fadeOutRight");
    setTimeout(function() {
        $(target_id).addClass("active-tour fadeInLeft");
    }, 50);
    setTimeout(function() {
        $($(".tour-panel")[current]).removeClass("fadeOutRight");
    }, 750);
    current = target_id.split('-')[1] || 0;
});

但出于某种原因,我遇到了两个具体问题:

问题1:我点击进入幻灯片,然后使用箭头键返回〜这使我跳回2张幻灯片.

问题2:我点击进入幻灯片,然后使用箭头键前进〜这会打破我的滑块并显示白色屏幕

我相信大多数探针都在这行代码中:

current = target_id.split('-')[1] || 0;

但我不是100%肯定,并需要你们的帮助,我已经准备了一个非常基本的小提琴例子在这里.

有些事情我已经试过了与搞乱split()变量,换出nextElement();和previousElement();,我只是不能找到一个可行的解决方案.

非常感谢所有帮助!

指向某些文件的链接

Pastebin到完整的JS

Pastebin到完整的CSS

我有一个滑块,我一直在努力工作.它的演示是3张幻灯片,但我试图添加4.当我添加它时,4项是其中之一

• 在后面永久
• 在右侧图像下

如果有办法,我不太清楚如何解决这个问题.为了帮助描述我正在寻找的东西,想象下面是我的图:

        [back img] 

[left img]      [right img]

        [front img]

我试图让它旋转.目前,您可以看到前/左/右图像,这是我需要的,但您也可以看到后图像.

我基本上需要隐藏背面图像,因此无论哪个图像在该点中,都要隐藏它.

这是HTML中的设置

<div class='p_slider'>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
</div>

CSS中的定位

.p_slider__item:nth-of-type(1) {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  left: -200px;
  -webkit-filter: blur(2px);
  opacity: 0.8;
  z-index: 1;
}
.p_slider__item:nth-of-type(2) {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  left: 0px;
  z-index: 2;
}
.p_slider__item:nth-of-type(3) {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  left: 200px;
  z-index: …

我有一个pop-over模式,我正在加载我的页面,我希望它一旦关闭不再显示该用户.我已经完成了类似的事情,localStorage();但由于某种原因无法弄清楚使这项工作的语法.

我尝试了一个设置类的解决方案,但是在刷新时它将重新加载原始元素,所以现在我正在尝试这个想法,我将模态的状态更改为"已访问".任何想法,我可能会失去,以我希望的方式工作吗？

localStorage功能:

$(function() {

    if (localStorage) {
        if (!localStorage.getItem('visited')) { 
            $('.projects-takeover').show(); 
        }
    } else { 
        $('.projects-takeover').show();
    }

    $('.projects-close').click(function() {
            $('.projects-takeover').fadeOut();
    });
        localStorage.setItem('visited', true);
        return false;
    });

这是一个实现代码的jsfiddle,感谢您的帮助!

我目前正在为案例研究构建一个页面,其中包括一个主横幅图像,后面是3行3个子图像.每个图像都通过background-image属性添加,因此div可以保持相同的高度.div有一个悬浮容器在顶部,我希望始终在顶部,但当我到达我的断点(850px及以下)时,很难,没有精确的像素,将盖子保持在容器的顶部.有没有比我正在做的更容易的方法呢？

这是我正在使用的基本HTML结构

<div class="study-list">
<a href="#">
    <div class="study-block left">
        <div class="left-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study1"></div>
    </div>
</a> 
<a href="#">
    <div class="study-block center">
        <div class="center-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study2"></div>
    </div>
</a> 
<a href="#">
    <div class="study-block right">
        <div class="rightt-case-cover">
            <div …

我们在我们的网站上有一个自定义搜索栏,我注意到有时(9/10次)JS将抛出此错误,这会强制您搜索的内容无法呈现

www.googleapis.com/customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu...oogle.com&callback=google.search.Search.apiary####&nocache=1446053383742:2

未捕获的TypeError:google.search.Search.apiary ####不是函数

抛出错误时搜索页面:

搜索页面,错误被截断/已解决

但是,如果我要刷新或研究,这个错误就会被打破,并会呈现我的所有搜索.浏览文件后,我发现google.search.Search.apiary####他们所指的只提到一次.所以我相信这个错误会在它出现时截断整个文件.可能导致这种情况的原因是什么？

我正在尝试在我的网站上创建一个过滤器部分，所有内容都是动态生成的（因此我无法为其添加额外的父对象），并且我们的样式指南使用flex项目创建了它们。我想在很大程度上保留此功能。

我希望我的3个flex项目具有a max-width并向左浮动，而在整个容器中将非flex项目向右浮动，设置为如下所示的最大宽度1080px：

Option 1    Option 2    Option 3                                    Non-flex Item

我试过设置flex-align值并遵循此答案，但这似乎并不起作用。

截至目前，这是我正在使用的代码：

的HTML

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

的CSS

.container{
      display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
            max-width: 1080px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: content-box;
    }

    .child{
          display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal; …

我正在尝试将戒指分成3个部分，每个部分的文字都居中。我可以弄清楚文字部分，但由于我尝试制作戒指，因此似乎无法将它分成3个相等的部分。

理想情况下，我想使用边框进行操作，以便可以向其添加箭头，但我尝试通过拆分圆来实现此目的，但是在将文本放置在需要的位置时遇到了问题。我想主要将其保留在CSS上，但我知道这些细分市场上的箭头可能会带来障碍。

这就是我想要做的

https://jsfiddle.net/wrqpas09/

.segment {
  position: absolute;
  border: 20px solid #000;
  display: inline-block;
  min-width: 200px;
  min-height: 200px;
  border-radius: 50%;
  top: 0;
  left: 0;
  border-color: transparent;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.s1 {
  border-top-color: green;
  left: 2px
}

.s2 {
  border-right-color: red;
  top: 2px;
  left: 2px
}

.s3 {
  border-bottom-color: blue;
  top: 2px;
}

.s4 {
  border-left-color: #000;
}

<div class="segment s1"></div>
<div class="segment s2"></div>
<div class="segment s3"></div>
<div class="segment s4"></div>

我正在使用插件list.js来排序项目列表.目前该示例显示了用于过滤的搜索栏,我想使用下拉选择来更精确地过滤两种材料"玻璃"和"塑料".

这是我的小提琴:http://jsfiddle.net/32u3t1g9/6/ (授予list.js不能很好地使用它.)

编辑:更新了jquery插件的小提琴

这是我的代码:

HTML

    <div id="container">
  <div class="page">
    <div>
      <h1>piece-y search</h1>
    </div>

    <div id="main">


      <div class="c1">
        <h2>piece search</h2>
        <div id="piece-search">

            <ul class="sort-by">
            <li>
            <input class="search" placeholder="Search pieces" />
            </li>
            <li class="sort btn" data-sort="type">Sort by type</li>
            <li class="sort btn" data-sort="thickness">Sort by thickness</li>
            <li class="sort btn" data-sort="height">Sort by height</li>
            <li class="sort btn" data-sort="category">Sort by style</li>
          </ul>

          <ul class="filter">
             <li>
            <select name="material" id="filter-material">
            <option selected="selected" value="material">Select a Material</option>
            <option value="material">Plastic</option>
            <option value="material">Glass</option>
            </select> 
            </li>
            <li class="btn" id="filter-none">Show all</li> …

我正在使用搜索构建分页索引.我有索引分页和工作,但我想添加prev/next和第一个/最后一个按钮,因为这必须是可扩展的.

List.JS似乎没有这些开箱即用,所以我尝试通过将lis 附加/前置到paginationdiv ul中来实现.这确实有效,除了点击后它们被删除.

加入分页div

$('.pagination').prepend('<li class="btn-next"> 9 </li>');

$('.pagination').append('<li class="btn-prev"> 0 </li>');

运行按钮的功能

$('.btn-next').on('click', function(){
    var list = $('.pagination').find('li');
    $.each(list, function(position, element){
        if($(element).is('.active')){
            $(list[position+1]).trigger('click');
        }
    })

})

$('.btn-prev').on('click', function(){
    var list = $('.pagination').find('li');
    $.each(list, function(position, element){
        if($(element).is('.active')){
            $(list[position-1]).trigger('click');
        }
    })

在此之后,我不知道我怎么能让他们保持附加,因为它似乎每次点击都重写它.有没有其他人使用List.JS创建这些按钮？

这是我的小提琴.

我有一个<li>当hovered时应该将数字改为unicode图标,例如播放按钮.

unicodes不断弹出一个看起来像这样的图标: [?]我假设它找不到它们.我在其他部分使用字体图标就好了,有什么想法吗？

    <ul class="popular-songs">
            <li>
<div class="album-cover"><img src="http://newnoisemagazine.com/wp-content/uploads/2014/04/Expire-Pretty-Low-cover.jpg"></div> 
<span class="number">
<span>1</span>
</span> 
<span>+</span>
<span class="title">Pretty Low</span>
<span class="misc"><i class="fa fa-ellipsis-h"></i></span>
<span class="total-plays">163,957</span></li>
        </ul>

CSS:

.popular-songs li .number{
  position: relative;
  content: '1';
  top:0px;
}
.popular-songs li:hover .number span{
  display: none;
}
.popular-songs li:hover .number:after{
  content: "\f04b";
  position:relative;
  top:15px;
}

我试过以我能想到的每一种可能的方式编写unicode.

content: "/XXXX";

content: "\XXXX";

content: "XXXX";

content: "[XXXX]";

它们似乎都不适合我.

我正在制作手风琴风格的视频部分.我目前正在尝试检查点击中是否存在类.我希望它一次只打开1个部分,所以我需要

1. 单击是否存在该类
2. 如果是,请删除课程
3. 将类添加到单击的元素

我试着这样做addClass();,toggleClass();但我不能100%肯定我缺少的东西.

添加课程

$(".contents-row").click(function(){
    $(this).toggleClass("content-open");
}); 

切换类

$('.contents-row').click(function(){
    $(this).toggleClass('content-open');
});

这是基本的HTML设置

<div class="contents-row">
    <div class="content-option press">
        <div class="class-section-title">test1</div>
    </div>
    <div class="drop">
        test 1
    </div>
</div>

JSFiddle下载的完整版本.

谢谢您的帮助!

我有一个奇怪的用例,我们的博客工具将<!-- Read More -->一个帖子附加到帖子中,上面的任何内容都会被推送到我们的列表页面.

我想要做的是找到匹配的注释,然后告诉<p>它上面的任何标签(在DOM中)应该设置为.hide()或.remove().这是我开始的,我不太确定我是否可以选择.prevAllHTML评论.

var content = $('.main').html();
//search for matching comment
var comment = content.match(/<!--.*?-->/);
alert(comment);
comment.prevAll('p').remove();

你可以在这里看到我的小提琴.

反正有没有完成这项任务？