jQuery垂直泡泡字幕HTML元素

问题描述：

我正在寻找一个好的垂直泡泡字幕插件。jQuery垂直泡泡字幕HTML元素

不是简单的垂直选取框，我正在寻找一个很好的“flash like”效果插件，这是从div内容的底部到顶部顺滑的元素字幕。

可能是非常好的，但我认为这只是在我的梦中这个插件

你能举个例子吗？ – chchrist 2010-11-13 16:09:51

答

你的意思是这样The Silky Smooth Marquee插件？

uhmmmmm ..... uhmmmmm ....完全没有意思：P – memento 2010-11-13 23:25:05

我的意思是我喜欢鼓泡或者有一些很好的效果：P – memento 2010-11-13 23:25:27

答

嗯，这是不是非常有效的，但是这是一个良好的开端，我认为：

jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed) { 
    this.css('float', 'left'); 

    vertSpeed = vertSpeed || 1; 
    horiSpeed = 1/horiSpeed || 1; 

    var windowH = this.parent().height(), 
     thisH = this.height(), 
     parentW = (this.parent().width() - this.width())/2, 
     rand = Math.random() * 1000, 
     current = this; 

    this.css('margin-top', windowH + thisH); 
    this.parent().css('overflow', 'hidden'); 

    setInterval(function() { 
     current.css({ 
      marginTop: function(n, v) { 
       return parseFloat(v) - vertSpeed; 
      }, 
      marginLeft: function(n, v) { 
       return (Math.sin(new Date().getTime()/(horiSpeed * 1000) + rand) + 1) * parentW; 
      } 
     }); 
    }, 15); 

    setInterval(function() { 
     if (parseFloat(current.css('margin-top')) < -thisH) { 
      current.css('margin-top', windowH + thisH); 
     } 
    }, 250); 
}; 

$('.message').verticalMarquee(0.5, 1);

它使用Math.sin的元素水平移动。函数verticalMarquee接受两个参数，一个用于垂直速度，另一个用于水平速度。该函数只能在仅包含一个元素的jQuery对象上调用 - 在测试过程中，多个元素一次被动画导致可怕的滞后。

看到一个简单的演示在这里：http://jsfiddle.net/CcccQ/2/

jQuery垂直泡泡字幕HTML元素

相关推荐