2009年2月13日星期五

jQuery Marquee

跑马灯效果,项目:http://plugins.jquery.com/project/marquee
演示页:http://remysharp.com/demo/marquee.html

jQuery版本1.2.x

    <script src="jquery-1.2.6.js" type="text/javascript"></script> 
    <script src="../downloads/jquery.marquee.js" type="text/javascript"></script> 
 
    <script type="text/javascript"> 
    <!--
    $(function () {
        // basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras
        
        $('div.demo marquee').marquee('pointer').mouseover(function () {
            $(this).trigger('stop');
        }).mouseout(function () {
            $(this).trigger('start');
        }).mousemove(function (event) {
            if ($(this).data('drag') == true) {
                this.scrollLeft = $(this).data('scrollX')   ($(this).data('x') - event.clientX);
            }
        }).mousedown(function (event) {
            $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
        }).mouseup(function () {
            $(this).data('drag', false);
        });
    });
    //--> 
    </script> 
<marquee behavior="scroll" scrollamount="1" direction="left" width="350">

<marquee scrollamount="2" behavior="alternate" direction="right" width="350">

<marquee loop="3" behavior="slide" direction="right" width="350">

<marquee behavior="scroll" direction="down" scrollamount="2" height="100" width="350">

没有评论: