Knowledge Walls
John Peter
Pune, Maharashtra, India
How to create Image vertical roller by height in JQuery and HTML Example
1519 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>
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