Hỗ trợ trực tuyến

  • (Bùi Trọng Bằng)

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    1 khách và 0 thành viên

    DANH NGÔN MỖI NGÀY

    Gốc > Code cho Blog và Web >

    Code Album ảnh rất hay

    Hôm nay Thủ thuật blog violet post tặng các bạn một code Album vô cùng đẹp .Các bạn có thể sử dụng để đưa vào blog

    Demo tại đây

    Code

    <body bgcolor="#FFFFFF" background="#B2A4FF"
    marginwidth="0" leftmargin="0" onload="ImageBook()">

    <table border="0" width="619" cellspacing="0" cellpadding="0">
      <tr>
        <td width="619" valign="middle" align="left">
        
        <p align="left"><!--webbot bot="HTMLMarkup" startspan --><script type="text/javascript">/*(c) Ger Versluis 2003*/

    /********************************************************
        Create a div with transparent place holder in your html   
        <div id="Book" style="position:relative">
            <img src="Dynamic Drive DHTML Scripts- Book Flip Slideshow\placeholder.gif" width="144" height="227">
        </div>
        width = 2*book image width +4 height = book image height+2

        Insert onload in body tag
            <body onload="ImageBook()">   
    *********************************************************/

    // 7 variables to control behavior
        var Book_Image_Width=205;
        var Book_Image_Height=285;
        var Book_Border=true;
        var Book_Border_Color="gray";
        var Book_Speed=15;
        var Book_NextPage_Delay=1500;
        var Book_Vertical_Turn=0;   

    // array to specify images and optional links. At least 4
    // If Link is not needed keep it ""

        Book_Image_Sources=new Array(
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep1.jpg","http://caobang83.violet.vn",
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep2_500.jpg","http://caobang83.violet.vn",
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep3.jpg","http://caobang83.violet.vn",
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep4_500.jpg","http://caobang83.violet.vn" // NOTE No comma after last line
            );

    /***************** DO NOT EDIT BELOW **********************************/
        var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
        var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

        function ImageBook(){
            if(document.getElementById){
                for(i=0;i<Book_Image_Sources.length;i+=2){
                    B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
                Book_Div=document.getElementById("Book");
                B_LI=document.createElement("img");Book_Div.appendChild(B_LI);   
                B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
                B_MI=document.createElement("img");Book_Div.appendChild(B_MI);   
                B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
                B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
                B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
                B_LI.style.left=0+"px";
                B_MI.style.top=0+"px";
                B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
                B_RI.style.top=0+"px";
                B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
                B_LI.style.height=Book_Image_Height+"px";
                B_MI.style.height=Book_Image_Height+"px";
                B_RI.style.height=Book_Image_Height+"px";
                B_LI.style.width=Book_Image_Width+"px";
                B_MI.style.width=Book_Image_Width+"px";
                B_RI.style.width=Book_Image_Width+"px";
                if(Book_Border){
                    B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
                    B_LI.style.borderWidth=1+"px";
                    B_MI.style.borderWidth=1+"px";
                    B_RI.style.borderWidth=1+"px";
                    B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
                B_LI.src=B_Pre_Img[0].src;
                B_LI.lnk=Book_Image_Sources[1];
                B_MI.src=B_Pre_Img[2].src;
                B_MI.lnk=Book_Image_Sources[3];
                B_RI.src=B_Pre_Img[4].src;
                B_RI.lnk=Book_Image_Sources[5];
                B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
                B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
                B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
                BookImages()}}

        function BookImages(){
            if(!B_Stppd){
                if(Book_Vertical_Turn){
                    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
                    MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
                    B_MI.style.top=MidOffset+"px";
                    B_MI.style.height=B_MSz+"px"}
                else{    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
                    MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
                    B_MI.style.left=MidOffset+"px";
                    B_MI.style.width=B_MSz+"px"}
                B_Angle+=Book_Speed/720*Math.PI;
                if(B_Angle>=Math.PI/2&&B_Direction){
                    B_Direction=0;
                    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
                    B_MI.src=B_Pre_Img[B_CrImg].src;
                    B_MI.lnk=Book_Image_Sources[B_CrImg+1];
                    B_CrImg+=2}
                if(B_Angle>=Math.PI){
                    B_Direction=1;
                    B_TI=B_LI;
                    B_LI=B_MI;
                    B_MI=B_TI;
                    if(Book_Vertical_Turn)B_MI.style.top=0+"px";
                    else B_MI.style.left=Book_Image_Width+1+"px";           
                    B_MI.src=B_RI.src;
                    B_MI.lnk=B_RI.lnk;
                    setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
                else setTimeout("BookImages()",50)}
            else setTimeout("BookImages()",50)}

        function Book_Next_Delay(){
                if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
                B_RI.src=B_Pre_Img[B_CrImg].src;
                B_RI.lnk=Book_Image_Sources[B_CrImg+1];
                B_MI.style.zIndex=2;
                B_LI.style.zIndex=1;
                B_Angle=0;
                B_CrImg+=2;
            setTimeout("BookImages()",50)}

        function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
        function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
        function B_Rstrt(){B_Stppd=false}
    </script>

        <div id="Book" style="position:relative">
            <img src="Dynamic Drive DHTML Scripts- Book Flip Slideshow\placeholder.gif" width="144" height="227">
        </div><!--webbot bot="HTMLMarkup" endspan -->
          </p>
        </td>
      </tr>
    </table>

     HD:

    -Các bạn cho code trên vào thẻ body của một page 

    -Thay đổi link ành và link blog khi click chuột vào  trong đoạn code trên

    // array to specify images and optional links. At least 4
    // If Link is not needed keep it ""

        Book_Image_Sources=new Array(
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep1.jpg","http://caobang83.violet.vn",
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep2_500.jpg","http://caobang83.violet.vn",
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep3.jpg","http://caobang83.violet.vn",
            "http://caobang83.violet.vn/uploads/resources/blog/727978/anhdep4_500.jpg","http://caobang83.violet.vn" // NOTE No comma after last line
            );

     Chúc các bạn thành công

    Thủ thuật blog violet


    Nhắn tin cho tác giả
    Cao Bằng @ 21:24 29/12/2009
    Số lượt xem: 2296
    Số lượt thích: 0 người
    Avatar

    Code Album ảnh rất hay

    No_avatar

    Nhap code vao dau thay nhi? 

    Avatar
    Với blog Violet thì thầy cho vào thêm khối chính
    No_avatar
    CAM ON
     
    Gửi ý kiến