[Original] switching effect picture jQuery

First look at renderings show:

 

 All of a sudden brief: I used to write jquery, html + css + jquery, page layout can be free to play.

Click on the picture, will head into the Options box from the right side of the page excessively again. Click on the picture you can modify the picture, you can select pictures to more local

Change avatar. In fact, clicking on the image of a picture that has been replaced, can modify. Select the file can only play with local, no number

Database support. (Because the database is too cumbersome to write QAQ) later learn something new when updates

Here is the code:

 

 Have to have so jquery js guide jqueey the package, my version is 3.4.1, which can be downloaded from the official website: https: //jquery.com/

html code:

<div class="box">
        <h2 style="color: aliceblue;">点击图片图片更换头像</h1>
        <div class="ft_img" id="ft_img">
            <img src="img/01.jpg" class="t_img"/>
        </div>
        <div class="s_box" id="sbox">
            <div class="header">
                <>P</Set Profile>P
                <span class="close" id="close">x</span>
            </div>
            <hr width="80%" color="#e0e0eb"/>
              <div id="t_img">
                  <img src="img/01.jpg" />
                   <img src="img/01.png" />
                    <img src="img/02.png" />
                     <img src="img/03.png" />
                      <img src="img/04.png" />
                       <img src="img/05.png" />
                       <img src="img/01.png" />
                        <img src="img/02.png" />
                         <img src="img/03.png" />
                          <img src="img/04.png" />
                           <img src="img/05.png" />
                           <img src="img/01.png" />
                            <img src="img/02.png" />
                             <img src="img/03.png" />
                              <img src="img/04.png" />
                               <img src="img/05.png" />
                </div>
            <hr width="80%" color="#e0e0eb"/>
            <div class="bt_box">
                <input type="file" name="file0" id="file0" accept="image/*"/>
                <a class="gb" href="javascript:" id="hide">classA<>A</Close
                ="queren" href="javascript:" id="but">保存头像</a>
            </div>
        </div>
        </div>

css code:

    body{
                margin: 0;
                padding: 0;
                background-color: black;
            }
            *{
                text-decoration: none;
            }
            .box{
                text-align: center;
            }
            .t_img{
                width: 75px;
                height: 75px;
                border-radius: 100%;
            }
            .s_box{
                border-radius: 10px;
                width: 500px;
                height: auto;
                border: 1px #c2c2d6 solid;
                margin-left: 430px;
                background-color: #c2c2d6 ;
                position:fixed;
                display: none;
            }
            .s_box img{
                width: 61px;
                height: 61px;
                margin: 5px;
                border:1px solid #ccc;
            }
            .s_box img:hover{
                border-color:red ;
                transform: scale(1.25);
                transition: .5s;
            }
            .header{
              width: 100%;
              text-align: center;
              font-size: 14px;
              margin-top: 30px;    
            }
            .close{
                color:#000;
                font-size: 21px;
                opacity: .7;
                position:absolute;
                right:8px;
                top:1px;
                cursor: pointer;
            }
            .bt_box .gb {
                display:inline-block;
                width:80px;
                height:35px;
                border-radius: 10px;
                background:#f3f3f3;
                color:#444;
                line-height: 35px;
                margin: 10px;
            }
            .bt_box .queren{
                display:inline-block;
                width:80px;
                height:35px;
                border-radius: 10px;
                background:#1a53ff;
                color:white;
                line-height: 35px;
            }
            .bt_box .gb:hover,.bt_box .queren:hover{
                box-shadow: 0 6px 10px 0 rgba(0,0,0,0.24),0 9px 25px 0 rgba(0,0,0,0.19);
            }

js code:

    / * Hide, show results * / 
              $ ( ".t_img"). The Click ( function () {
                     $("#sbox").show("slow");
              });
              $("#hide").click(function(){
                     $("#sbox").hide("slow");
              });
              $("#close").click(function(){
                     $("#sbox").hide("slow");
              });
            / *   Select the image acquisition src value * / 
        var $ t_img = document.getElementById ( 't_img' );
         var $ t_img.getElementsByTagName IMG = $ ( 'IMG' );
         var index = 0 ;
         for ( var I = 0; I <$ img.length; I ++ ) {
            $img[i].index=i;
            $img[i].onclick = function(){
                $img[index].style.borderRadius="15%";
                $img[index].style.border="none"
                this.style.borderRadius="50%";
                this.style.border="1px solid red"
                index = this.index;
                var $newsrc = $img[index].src;
                $(".t_img").attr('src',$newsrc);
            }
        }
         // click the Modify button to confirm the replacement head 
        $ ( "# But"). The Click ( function () {
            $("#sbox").hide("slow");
        })
        
        // speaking to replace the selected picture avatar picture 
        $ ( "# File0") Change (. Function () {
           var objUrl = getObjectURL ( the this .files [0 ]);  
           IF (objUrl) {  
            $(".t_img").attr("src", objUrl) ;  
          }  
        }) ;  
        // Create a file is accessible to the URL   
        function getObjectURL (file) {  
           var URL = null ;  
            // results following execution function is the same, but the need to perform different functions for different js only browsers   
          IF (window ! .createObjectURL = undefined) { // Basic   
            URL = window.createObjectURL (File);  
          } else if (window.URL!=undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file) ;  
          } else if (window.webkitURL!=undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file) ;  
          }  
          return url ;  
        }  

These are all code, look for it on their own picture material, remember to declare a guide js package, or jquery code is not effective.

Inadequate please also indicate QAQ