Knowledge Walls
John Peter
Pune, Maharashtra, India
How to create Image vertical roller by height in JQuery and HTML Example
2675 Views
VerticalRoller
<html>
    <head>
        <title>HTML-JQuery</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
         
        <script type="text/javascript">
            $.fn.kw_img_roller = function(options){
                $element = $(this);
                $element.css("background-image","url('"+options.url+"')");
                $element.css("height",options.scroll_height);
                $element.data("scroll_height",options.scroll_height);
                $element.data("present_height",0);
                
                $img = $("<img />");
                $img.attr("src",options.url);
                
                $img.load(function(){
                    $element.css("width",this.width);
                    $element.data("height",this.height);
                });
                
                setInterval(function(){
                        if ($element.data("height") == ($element.data("present_height") + $element.data("scroll_height"))){
                            $element.data("present_height",0);
                        }
                        else {
                            $element.data("present_height",$element.data("present_height") + $element.data("scroll_height"));
                        }
                        $(".testing").html($element.data("present_height")+"-"+$element.data("height"));
                        $element.css("background-position","0 -"+($element.data("present_height")+(($element.data("present_height") != 0)?1:0))+"px");
                },options.delay);
                
            };
            
            $(function(){
                $(".image_roller").kw_img_roller({
                    url: "kw_slider.png",
                    direction: "vertical",
                    scroll_height: 41,
                    delay: 1000
                });
            });
        </script>
    </head>
    <body bgcolor="gray">
         <div class="image_roller"></div>
    </body>
</html>
Next Topics
Next lessons of current book.
Computer software engineer articles of One day One Thing to Know
Best Lessons of "One day One Thing to Know"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details