Archive for janvier 2017

Javascript SlideShow - Next , Previous Button

Add Comment
javascript images slider

In This Javascript Tutorial we will See How To Create A Simple Images Slider With Next And Previous Button In JS Using Netbeans Editor .
See Previous SlideShow.


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: Slider</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            div{background-color: #95a5a6;width: 400px;overflow: hidden;margin: 50px auto;padding: 20px;}
            img{border: 2px solid #fff;}
            
            div button:first-of-type{float: left;}
            div button:last-of-type{float: right;}
            
            button{background-color: #fff; color: #27ae60; border: 2px solid #27ae60;
                   font-size: 20px; font-weight: bold; width: 50px; cursor: pointer;padding: 5px;}
            
        </style>
        
        <script>
            
            var i = 0,images = ["../images/img1.png",
                                "../images/img2.png",
                                "../images/img3.png",
                                "../images/img4.png"];
                            
          function mySlide(param)
          {
              if(param === 'next')
              {
                  i++;
                  if(i === images.length){ i = images.length - 1; }
              }else{
                  i--;
                  if(i < 0){ i = 0; }
              }
              
              document.getElementById('slide').src = images[i];
          }
            
        </script>
    </head>
    <body>
        
        <div>
            <img src="../images/img1.png" id="slide" alt="" width="400" height="200">
            <button onclick="mySlide('prev');"><</button>
            <button onclick="mySlide('next');">></button>
        </div>
        
    </body>
</html>


OUTPUT:

javascript slider

Javascript typewriter

Add Comment

How To Make A Typewriter Effect In Javascript Using setTimeout

Javascript typewriter effect
In This Javascript Tutorial we will see How To Create A Typewriter To Display Text Letter By Letter Using setTimeout In JS In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JS: Show Text Letter By Letter</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <h1 id="hid"></h1>

        <script>
            
            var i = 1;
            function func()
            {
                var message = "This Is A Text Message Test";
                if( i <= message.length )
                {
                    
                    var txt = message.substring(0,i);
                    document.getElementById("hid").innerHTML = txt;
                    
                    if(i%2 === 0)
                    {
                        document.getElementById("hid").style.color = "BLUE";
                    }else{
                        document.getElementById("hid").style.color = "RED";
                    }
                    
                    setTimeout("func()",200);
                    i++;
                }
                
                else{
                    
                    i = 1;
                    document.getElementById("hid").innerHTML = "";
                    setTimeout("func()",1000);
                }
            }
            
            func();

        </script>
        
    </body>
</html>

CSS3 Rotate Div

Add Comment

How To Rotate A Div Using CSS3

css3 rotate div
In This CSS Tutorial we will see How To Rotate Div In Mouse Hover With Transition Using HTML And CSS3 Transform Property In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Rotate Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{
                background-color: #ddd;
                padding: 25px;
            }
            
            .content{
                width: 100px;height: 100px;background-color: red;
                transition: all 2s ease-in-out;
                transform: rotate(45deg);
            }
            .content:hover{
                transform: rotate(-180deg);
            }
            
            .child{width: 25px;height: 25px;}
            .child1{float: left;background-color: black;}
            .child2{float: right;background-color: yellow;}
            .child3{float: left;background-color: #fff;margin-top: 50%}
            .child4{float: right;background-color: blue;margin-top: 50%}
            
            .clearFloat{clear: both}
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="content">
                <div class="child child1"></div>
                <div class="child child2"></div>
                <div class="clearFloat"></div>
                <div class="child child3"></div>
                <div class="child child4"></div>
            </div>
        </div>
        
    </body>
</html>

CSS3 Moving A Div Animation

Add Comment

How To Move A Div In CSS3

css move div
In This CSS Tutorial we will see How To Make A Moving Div Animation Using Keyframes In CSS3 In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Moving Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{background-color: #ddd;padding: 25px;}
            .content{width: 100px;height: 100px;background-color: red;
                     animation: move 5s linear infinite; }
            
            @keyframes move{
                
                0%{
                    transform:translate(0);
                    opacity:0;
                }
                
                50%{
                    transform:translate(1100px);
                    opacity:1;
                }
                100%{
                    opacity:0;
                }
            }
            
        </style>
        
    </head>
    <body>

        <div class="container">
            <div class="content"></div>
        </div>
        
    </body>

</html>

JavaScript Multiplication Table

Add Comment

How To Create Multiplication Table In Javascript

Multiplication Table In Javascript
In This Javascript Tutorial we will see How To Make A Multiplication Table With HTML Table Using JS In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>

<html>
    <head>
        <title>Javascript Multiplication Table</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <script>
            
            document.write("<table border='1px'>");
            
            document.write("<tr style='font-size:30px;color:#fff;background-color:#000;'>");
            
            for(i = 1; i < 11; i++)
            {
                document.write("<th> [ " + i + " ]</th>");
            }
            
             document.write("</tr>"); 
            
            for(k = 1; k<11; k++)
            {
                var colorCode = "";
                if(k%2 === 0)
                {
                    colorCode = "#eee";
                }else{
                    colorCode = "#99e265";
                }
                
                document.write("<tr style='background-color:"+ colorCode +"'>");
                
                for(j= 1; j< 11; j++)
                {
                 document.write("<td style='font-size:23px;'>"+j+" X "+ k + " = " + j*k + "</td>")   
                }
                
                 document.write("</tr>"); 
            }

            document.write("</table>");
            
        </script>

    </body>
</html>


OUTPUT:

javascript mutiplication table

CSS Slide Rollover Animation

Add Comment

How To Create Slide Rollover Animation  Using CSS3
In This CSS Tutorial we will see How To Make Image Rollover Slide Using HTML And CSS3 In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Css Image Overflow</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          
            .main{
                height: 50px;width: 100px;overflow: hidden;
            }
            .main img{margin-top: -50px;transition: all .5s ease-in-out}
            .main img:hover{margin-top: 0}
            
            .main2{margin-top: 10px;
                height: 100px;width: 50px;overflow: hidden;
            }
            .main2 img{margin-left: 0;transition: all .5s ease-in-out}
            .main2 img:hover{margin-left: -50px;}
            
        </style>

    </head>
    <body>
        
        <div class="main">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgy.png" alt=""/> 
        </div>
        
         <div class="main2">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgx.png" alt=""/> 
        </div>
        
    </body>
</html>

CSS3 Cubic-Bezier Animation

Add Comment

How To Create An Animation With Cubic Bezier Using CSS3

Css3 Keyframes & Cubic-Bezier
In This CSS Tutorial we will see How To Make An Animation Using Keyframes And Cubic-Bezier Using HTML And CSS3 In Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Animation: Cubic-Bezier</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .main{
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius:50%;
                margin: 100px auto 0 auto;
                animation: myAnimation 2s cubic-bezier(1,-0.52,0,1.76) infinite;
            }
            
            @keyframes myAnimation
            {
                0%{
                    transform:scale(1);
                    border-radius:0;
                }
                50%{
                    transform:scale(3);
                    border-radius:50%;
                }
                100%{
                    transform:scale(1);
                    border-radius:0;
                }
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="main"></div>
        
    </body>
</html>

Useful WebSite Cubic-Bezier 


Inscription à : Articles (Atom)