LearnFast.Ninja

jQuery marquee plugin text effect

first you need to download the plugin from: http://remysharp.com/downloads/jquery.marquee.js insert the plugin into your page create simple marquee, insert that marquee to div with some id, and then tell to the plugin that in this div it should effect.

Step 1: first you need to download the plugin from: Uhttp://remysharp.com/downloads/jquery.marquee.jsU

Step 2: insert the plugin into your page:

<script type="text/javascript" src="http://remysharp.com/downloads/jquery.marquee.js"></script>


Step 3: create simple marquee:

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

 <div>

 jquery<br /><br />marquee

 <br /><br />plugin <br /><br />

 text <br /><br />effect

 </div>

</marquee>


Step 4: insert that marquee to div with some id, and then tell to the plugin that in this div it should effect.

$(function () {

    $('#MarqueeHere marquee').marquee();

});


Complete code:

<html>

<head>

    <title>jquery marquee plugin text effect</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="http://remysharp.com/downloads/jquery.marquee.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#MarqueeHere marquee').marquee();

        });

    </script>

</head>

<body>

    <div id="MarqueeHere" style="border: solid 1px #000000; width: 350px;">

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

 <div>

 jquery<br /><br />

 marquee<br /><br />

 plugin <br /><br />

 text <br /><br />

 effect

 </div>

 </marquee>

    </div>

</body>

</html>


Result:


Tags

jquery

marquee