我正在使用以下代码在网页的顶层滑动图像，但它有点抖动，在图像下方出现条纹垂直线，尤其是在包含许多嵌套元素的内容上方时。即使边界设置为零也是如此。对于使用 JS/CSS 滑动图像的更流畅的方法有什么建议吗？

border=4;
pps=250;  // speed of glide (pixels per second)
skip=2;  // e.g. if set to 10 will skip 9 in 10 pixels
refresh=3;  // how often looks to see if move needed in milliseconds

elem = document.createElement("img");
elem.id = 'img_id';
elem.style.zIndex="2000";
elem.style.position="fixed";
elem.style.top=0;
elem.style.left=0;
elem.src='http://farm7.static.flickr.com/6095/6301314495_69e6d9eb5c_m.jpg';
elem.style.border=border+'px solid black';
elem.style.cursor='pointer';
document.body.insertBefore(elem,null);

pos_start = -250;
pos_current = pos_start;
pos_finish = 20000;

var timer = new Date().getTime();
move();

function move ()
{
  var elapsed = new Date().getTime() - timer;
  var pos_new = Math.floor((pos_start+pps*elapsed/1000)/skip)*skip;

  if (pos_new != pos_current)
  {
    if (pos_new>pos_finish)
      pos_new=pos_finish;

    $("#img_id").css('left', pos_new);
    if (pos_new==pos_finish)
      return;

    pos_current = pos_new;
  }

  t = setTimeout("move()", refresh);
}

最佳答案

我没有确定可以防止垂直线出现的解决方案。
不过，我确实有一些技巧可以改进您的代码，从而提高性能，并且您可能有机会让线条消失。

1. 在移动函数之外缓存图像元素:

   var image = $("#img_id")[0];

   在您的代码中，没有理由每 3 毫秒针对 DOM 查询一次图像 ID。 jQuery 的选择器引擎，Sizzle 需要做很多工作¹。

2. 不要使用 jQuery CSS 函数:

   image.style.left = pos_new;

   设置属性对象比函数调用更快。在 jQuery css 函数的情况下，至少有两个函数调用(一个到 css 和一个在 css 内部)。

3. 使用间隔而不是超时:

   setInterval(移动, 刷新);

   I would consider an interval for one-off animations I wanted to be as smooth as possible

   setTimeout or setInterval?

另一种使动画更流畅的选择是使用 CSS 过渡或动画。可以在CSS Animations and JavaScript中找到很好的介绍和比较。通过约翰·雷西格

浏览器支持表:http://caniuse.com/#search=transition

我发现一个 JavaScript 库可以很容易地通过 JavaScript 制作 CSS 动画，它是 morpheus .

¹ 在幕后，这是它每 3 毫秒为查找您的图片而执行的代码:

在支持querySelectorAll的浏览器中:

Sizzle = function( query, context, extra, seed ) {
    context = context || document;

    // Only use querySelectorAll on non-XML documents
    // (ID selectors don't work in non-HTML documents)
    if ( !seed && !Sizzle.isXML(context) ) {
        // See if we find a selector to speed up
        var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );

        if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
            // Speed-up: Sizzle("TAG")
            if ( match[1] ) {
                return makeArray( context.getElementsByTagName( query ), extra );

            // Speed-up: Sizzle(".CLASS")
            } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
                return makeArray( context.getElementsByClassName( match[2] ), extra );
            }
        }

        if ( context.nodeType === 9 ) {
            // Speed-up: Sizzle("body")
            // The body element only exists once, optimize finding it
            if ( query === "body" && context.body ) {
                return makeArray( [ context.body ], extra );

            // Speed-up: Sizzle("#ID")
            } else if ( match && match[3] ) {
                var elem = context.getElementById( match[3] );

                // Check parentNode to catch when Blackberry 4.6 returns
                // nodes that are no longer in the document #6963
                if ( elem && elem.parentNode ) {
                    // Handle the case where IE and Opera return items
                    // by name instead of ID
                    if ( elem.id === match[3] ) {
                        return makeArray( [ elem ], extra );
                    }

                } else {
                    return makeArray( [], extra );
                }
            }

            try {
                return makeArray( context.querySelectorAll(query), extra );
            } catch(qsaError) {}

        // qSA works strangely on Element-rooted queries
        // We can work around this by specifying an extra ID on the root
        // and working up from there (Thanks to Andrew Dupont for the technique)
        // IE 8 doesn't work on object elements
        } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
            var oldContext = context,
                old = context.getAttribute( "id" ),
                nid = old || id,
                hasParent = context.parentNode,
                relativeHierarchySelector = /^\s*[+~]/.test( query );

            if ( !old ) {
                context.setAttribute( "id", nid );
            } else {
                nid = nid.replace( /'/g, "\\$&" );
            }
            if ( relativeHierarchySelector && hasParent ) {
                context = context.parentNode;
            }

            try {
                if ( !relativeHierarchySelector || hasParent ) {
                    return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
                }

            } catch(pseudoError) {
            } finally {
                if ( !old ) {
                    oldContext.removeAttribute( "id" );
                }
            }
        }
    }

    return oldSizzle(query, context, extra, seed);
};

浏览器不会:

var Sizzle = function( selector, context, results, seed ) {
    results = results || [];
    context = context || document;

    var origContext = context;

    if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
        return [];
    }

    if ( !selector || typeof selector !== "string" ) {
        return results;
    }

    var m, set, checkSet, extra, ret, cur, pop, i,
        prune = true,
        contextXML = Sizzle.isXML( context ),
        parts = [],
        soFar = selector;

    // Reset the position of the chunker regexp (start from head)
    do {
        chunker.exec( "" );
        m = chunker.exec( soFar );

        if ( m ) {
            soFar = m[3];

            parts.push( m[1] );

            if ( m[2] ) {
                extra = m[3];
                break;
            }
        }
    } while ( m );

    if ( parts.length > 1 && origPOS.exec( selector ) ) {

        if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
            set = posProcess( parts[0] + parts[1], context, seed );

        } else {
            set = Expr.relative[ parts[0] ] ?
                [ context ] :
                Sizzle( parts.shift(), context );

            while ( parts.length ) {
                selector = parts.shift();

                if ( Expr.relative[ selector ] ) {
                    selector += parts.shift();
                }

                set = posProcess( selector, set, seed );
            }
        }

    } else {
        // Take a shortcut and set the context if the root selector is an ID
        // (but not if it'll be faster if the inner selector is an ID)
        if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
                Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) {

            ret = Sizzle.find( parts.shift(), context, contextXML );
            context = ret.expr ?
                Sizzle.filter( ret.expr, ret.set )[0] :
                ret.set[0];
        }

        if ( context ) {
            ret = seed ?
                { expr: parts.pop(), set: makeArray(seed) } :
                Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML );

            set = ret.expr ?
                Sizzle.filter( ret.expr, ret.set ) :
                ret.set;

            if ( parts.length > 0 ) {
                checkSet = makeArray( set );

            } else {
                prune = false;
            }

            while ( parts.length ) {
                cur = parts.pop();
                pop = cur;

                if ( !Expr.relative[ cur ] ) {
                    cur = "";
                } else {
                    pop = parts.pop();
                }

                if ( pop == null ) {
                    pop = context;
                }

                Expr.relative[ cur ]( checkSet, pop, contextXML );
            }

        } else {
            checkSet = parts = [];
        }
    }

    if ( !checkSet ) {
        checkSet = set;
    }

    if ( !checkSet ) {
        Sizzle.error( cur || selector );
    }

    if ( toString.call(checkSet) === "[object Array]" ) {
        if ( !prune ) {
            results.push.apply( results, checkSet );

        } else if ( context && context.nodeType === 1 ) {
            for ( i = 0; checkSet[i] != null; i++ ) {
                if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
                    results.push( set[i] );
                }
            }

        } else {
            for ( i = 0; checkSet[i] != null; i++ ) {
                if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
                    results.push( set[i] );
                }
            }
        }

    } else {
        makeArray( checkSet, results );
    }

    if ( extra ) {
        Sizzle( extra, origContext, results, seed );
        Sizzle.uniqueSort( results );
    }

    return results;
};

关于javascript - 使用 JS/CSS 实现更流畅的图像动画的技术，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8020310/