jQuery Marquee

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

jQuery版本1.2.x

 

  <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
>



html代码





        <div
 class
="demo"
>

            <h2
>Vanilla</h2
>

            <pre
><code
>&lt;
marquee behavior="scroll" scrollamount="1" direction="left" width="350"&gt;
</code
></pre
>

            <marquee
 behavior
="scroll" 
direction
="left" 
scrollamount
="2" 
width
="350"
><p
>START Lorem ipsum dolor sit amet END</p
></marquee
>

            <pre
><code
>&lt;
marquee scrollamount="2" behavior="alternate" direction="right" width="350"&gt;
</code
></pre
>

            <marquee
 scrollamount
="2" 
behavior
="alternate" 
direction
="right" 
width
="350"
><p
>START Lorem ipsum dolor sit amet END</p
></marquee
>

            <pre
><code
>&lt;
marquee loop="3" behavior="slide" direction="right" width="350"&gt;
</code
></pre
>

            <marquee
 loop
="3" 
behavior
="slide" 
direction
="right" 
width
="350"
><p
>START Lorem ipsum dolor sit amet END</p
></marquee
>

            <pre
><code
>&lt;
marquee behavior="scroll" direction="down" scrollamount="2" height="100" width="350"&gt;
</code
></pre
>

            <marquee
 behavior
="scroll" 
direction
="down" 
scrollamount
="2" 
height
="100" 
width
="350"
><p
>START Lorem ipsum dolor sit amet END</p
></marquee
>



        </div
>





转载自:http://playts.com/node/62