小编flk*_*lks的帖子

我有一个Swiper滑块和一个像"1/10"的计数器位置.我想用动画改变当前的幻灯片编号(1).我知道如何替换这个数字,但是这个动画就像另一个故事:

正如你在gif上看到的那样,如果我在我的滑块上适度点击它会很好地工作,但是当我双重三重或疯狂地点击下一个链接时,完全打破了计数器,因为在这个gif示例中做了克隆.
你知道我怎么能以更好的方式做到这一点？

我做了一个jsfiddle,只为第一次改变工作:
- http://jsfiddle.net/asb39sff/1/

// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();

    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")

    //$c_cur.text(index);
    //$c_next.text(index + 1);
}

如何减少这个代码(可能有一个循环？),有一个"功能",它需要方向和数字？

• @dir =想要的"方向"
• @number =我需要多少次阴影(这里是10次)
• @color =阴影的颜色

示例(工作,但不是很容易使用):

.perspective-box(@dir, @number, @color) when (@dir = se){
   -webkit-box-shadow:1px 1px 0 0 @color,
                      2px 2px 0 0 @color,
                      3px 3px 0 0 @color,
                      4px 4px 0 0 @color,
                      5px 5px 0 0 @color,
                      6px 6px 0 0 @color,
                      7px 7px 0 0 @color,
                      8px 8px 0 0 @color,
                      9px 9px 0 0 @color,
                      10px 10px 0 0 @color;
}

我有一个@dir改变阴影方向的参数.在这个例子中,我把@dir = se,在哪里se=东南.对于西北,东北,西南和东南来说,情况也是如此.

怎么避免这个...？

.perspective-box(@dir, @number, @color) …

我有一个用于article和sectionHTML5标记的类.

在家里:

<article class="exit">
    <a href="exit.php">
        <figure class="box">
            <img src="assets/img/projects/exit-m.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
    </a>
</article>

在项目页面上:

<section class="page project exit">
    <div class="corner nw intro">
        <figure class="box">
            <img src="assets/img/projects/exit.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
   </div>
   …

具有类exit的每个元素都包含一个figureHTML5元素.使用Less,我使用此代码来执行我想要的操作.

article.exit{width:260px; height:200px; top:315px; left:505px;
    figure{background-color:@exit-bg;}
    .box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section.exit{
    .box:hover{.perspective-box(nw, 10, @exit-shadow);}
    .intro figcaption:hover{background:@exit-hover;}
}

但我必须指明它是一个article还是一个section!我有很多这样的课程,这有点烦人......

做这样的事情是否有解决方案？会很酷......

.exit{
    &article{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    &section{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro …

我有一个像这样的数组：

printr_($photos);
======

Array
(
    [0] => Array
        (
            [path] => site:photos/photo-1.jpg
            [data] => Array
                (
                    [PhotoTitle] => Mega title
                    [PhotoDate] => 2015
                    [FlickrURL] => xxx
                    [Portrait] => 
                    [slug] => mega-title
                )

        )

    [1] => Array
        (
            [path] => site:photos/photo-2.jpg
            [data] => Array
                (
                    [PhotoTitle] => Photo title
                    [PhotoDate] => 2001
                    [FlickrURL] => xxx
                    [Portrait] => 
                    [slug] => photo-title
                )

        )

...

我想从一个字符串中获取数组索引（这是我浏览器当前URL中的子标签）。
尝试了该解决方案，但出现错误（第95行上的未定义索引：数据[…]）

/*
** Search in array
*/
function arraySearch($array, $field, $search){
    foreach($array as $key => $value){
        if …