اموزش ساخت Christmas Doodle

اموزش ساخت Christmas Doodle

ما در این آموزش قصد داریم تا به شما نحوه ساخت christmas doodle رو بدیم .ما برای این کار از کد های jQuery  استفاده خواهیم کرد

برای مشاهده لینک وارد شود

 ولی مثل همیشه کار را با نوشتن کد های HTML اغاز می کنیم.از آنجایی که اکثر کد های HTML توسط کد های jQuery تولید خواهد شد ما در زیر فقط به تعدادی div برای نگه داشتن انها نیاز داریم:

index.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Making Google's Christmas Doodle with jQuery | 8np Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="page"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

استایل ها در بالا و کد های اسکریپت در پایین قرار دارند.تگ page برای نگه داشتن نشانه های doodle به کار می رود مثل زیر

<a href="#" class="pic" style="top: 100px; left: 30px; width: 60px; height: 100px;
margin-top: 0px; margin-left: 0px; z-index: 0;">
    <img style="display:block;left:-10px;top:-30px;" src="img/1.jpg" />
</a>
<!-- More items -->

CSS

کد های CSS خیلی کم هستند و ما از انها فقط برای استایل تگ page و تصاویر استفاده خواهیم کرد.

css/styles.css

#page{
    width:680px;
    height:300px;
    margin:60px auto 80px;
    position:relative;
}

.pic{
    position:absolute;
    overflow:hidden;
    border:4px solid #99280e;
    text-decoration:none;
    z-index:0;
}

.pic img{
    position:absolute;
    border:none;
}

.pic:nth-child(2n+1){
    border-color:#6A2B1C;
}

.pic:nth-child(3n+2){
    border-width:5px;
}

jQuery

ما برای بزرگ کردن نمایش تصاویر از یک کلاس جاوااسکریپت استفاده خواهیم کرد و  هر یک از تصاویر به عنوان یک شیئ این کلاس محسوب خواهد شدکه توسط انها طول و عرض و ارتفاع و … را تنظیم خواهیم کرد.

اجازه بدید کلاس رو تعریف کنیم

js/script.js – Part 1

    function pic(options){

        // All the properties of the options object
        // are copied to the current pic:

        $.extend(this,options);

        // Creating the markup of the pic,
        // and storing it in the elem property:

        this.elem = $('<a>',{
            className: 'pic',
            href: this.href,
            css : {
                top : this.top,
                left : this.left,
                width: this.width,
                height: this.height
            }
        });

        var borderWidth = 5;

        // The bottom and right properties are not passed
        // as arguments, so we need to calculate them.

        this.bottom = this.top+this.height+2*borderWidth;
        this.right = this.left+this.width+2*borderWidth;

        this.image = $('<img>',{
            css:{
                left : -this.img.offsetLeft,
                top : -this.img.offsetTop
            }
        });

        var self = this;

        // Appending the image to the body so we can get
        // its dimensions. After we do this, we remove it
        // and append it to the markup stored in this.elem:

        this.image.hide().appendTo('body').load(function(){

            self.img.width = self.image.width();
            self.img.height = self.image.height();
            self.elem.append(self.image.show());

        }).attr('src',this.img.src);

    }

همانطور که مشاهده می کنید ما  هر تصویر را به عنوان یک شیئ کلاس در صفحه تعریف خواهیم کرد.زمانی که انها را فراخوانی می کنیم در قدم اول نشانه هایی را که دیدیم تولید خواهد کرد و در المان this.elem ذخیره خواهد کرد.

js/script.js – Part 2

// The prototype holds the class methods,
    // that are common for all objects.

    pic.prototype = {
        open	: function(){
            if(this.opened){
                return false;
            }

            this.opened = true;

            // Firing our own expand method with a percentage of 100:
            this.expand(100);
        },
        close	: function(){
            if(!this.opened && !this.focused){
                return false;
            }

            this.opened = this.focused = false;
            this.expand(0);
        },
        focus	: function(){
            if(this.focused || this.opened){
                return false;
            }

            this.focused = true;

            //Expanding to 30%:
            this.expand(30);
        },

        near	: function(x,y){
            // Checking whether the passed x and y coordinates are near the current image:
            return (x > this.left-15 && x < this.right+15 && y > this.top-15 && y
               < this.bottom+15);
        },

        over	: function(x,y){
            // The same, but returning true only when directly above the image:
            return (x > this.left && x < this.right && y > this.top && y < this.bottom);
        },

        expand : function(animPercent){
            if(!this.animateObj){
                this.animateObj = {count:0};
            }

            // We use jQuery's animate method to
            // change the count property of the object:

            $(this.animateObj).stop().animate({
                count:animPercent
            },{
                duration:150,

                // The step funciton is executed on every animation frame.
                // With jQuery's proxy we pass the "this" of the function:
                step:$.proxy(this.stepAnimation,this)
            });
        },

        stepAnimation : function(p,fx){

            // P holds the current value of the count property,
            // between 0 and 100. Below we are turning it into percentage.

            p = p/100;

            // Changing the size and position of the image holder:

            this.elem.css({
                width : (this.img.width - this.width)*p + this.width ,
                height : (this.img.height - this.height)*p + this.height,
                marginTop : -this.img.offsetTop*p,
                marginLeft: -this.img.offsetLeft*p,
                zIndex: 100*p
            });

            // Moving the image so it appears as if fixed:

            this.image.css({
                marginLeft : p*this.img.offsetLeft,
                marginTop : p*this.img.offsetTop
            });
        }
    };

سپس ما برای نمایش تصاویر دو المان near  و over داریم که برای نمایش تصاویر استفاده می کنیم به این صورت که هنگامی که موس روی آنها قرار می گیرد تصویر بزرگ شده و هنگام رد شدن موس از روی انها تصویر به حالت عادی بر می گردد.

js/script.js – Part 3

$(document).ready(function(){

        var page	= $('#page');

        // Creating the expanding images:

        var picArr = [
            new pic({
                top : 100, left : 30, width : 60,height : 100, href:'#',
                img : { src : 'img/1.jpg', offsetTop : 50, offsetLeft: 10}
            }),
            new pic({
                top : 55, left : 107, width : 70,height : 115, href:'#',
                img : { src : 'img/2.jpg', offsetTop : 30, offsetLeft: 46}
            }),

            /* More pics here */

        ];

        // Appending the images to the #page div:

        $.each(picArr,function(){
            page.append(this.elem);
        });

        // Setting up an event listener for the window.load event.
        // window.load is executed after all the images have been loaded.

        $(window).load(function(){

            page.mousemove(function(e){

                var left = (e.pageX - page.offset().left),
                    top = (e.pageY - page.offset().top),
                    pic = null;

                // On each mouse movement, loop through the pics
                // and check whether the cursor is above any of them.

                for(var i = 0;i < picArr.length;i++){
                    pic = picArr[i];

                    if(pic.near(left,top)){

                        if(pic.over(left,top)){
                            pic.open();
                        }
                        else pic.focus();
                    }
                    else pic.close();
                }

            }).mouseleave(function(){

                // When the mose leaves the #page div,
                // foce a close on all the images.

                for(var i = 0;i < picArr.length;i++){
                    picArr[i].close();
                }

            });
        });
    });

پایان

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 − = چهار