[原創]jquery更換頭像

先展示一下效果圖：

文件預覽效果：https://www.jq22.com/jquery-info22854

 

 簡單介紹一下子：我是用jquery寫的，html+css+jquery，頁面布局可以隨意發揮。

點擊頭像，會頭像選項框會從右側過度試進入頁面。點擊頭像就可以修改頭像，也可以選擇本地圖片來更

換頭像。其實在點擊圖像的那一個頭像就已經更換了，可以自行修改。選擇文件只能本地玩一下，沒有數

據庫支持。（因為寫數據庫太麻煩了QAQ）以后學到新東西的時候更新

下面是代碼：

 

 有於有jquery所以導jqueey的js包，我的是3.4.1版本，可以在官網里面下載：https://jquery.com/

html代碼：

<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>設置頭像</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">關閉</a>
                <a class="queren" href="javascript:" id="but">保存頭像</a>
            </div>
        </div>
        </div>

css代碼：

    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代碼：

    /* 隱藏，顯現效果 */
              $(".t_img").click(function(){
                     $("#sbox").show("slow");
              });
              $("#hide").click(function(){
                     $("#sbox").hide("slow");
              });
              $("#close").click(function(){
                     $("#sbox").hide("slow");
              });
            /*  選定圖像獲取圖像src值 */
        var $t_img = document.getElementById('t_img');
        var $img = $t_img.getElementsByTagName('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);
            }
        }
         //點擊確認修改按鈕更換頭像
        $("#but").click(function(){
            $("#sbox").hide("slow");
        })
        
        //講選中的圖片替換頭像的圖片
        $("#file0").change(function(){
          var objUrl = getObjectURL(this.files[0]) ;  
          if (objUrl) {  
            $(".t_img").attr("src", objUrl) ;  
          }  
        }) ;  
        //創建一個可存取到該file的url  
        function getObjectURL(file) {  
          var url = null ;  
           // 下面函數執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函數而已  
          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 ;  
        }  

以上是全部代碼，圖片素材就自己找啦，聲明一句記得導js包，不然jquery代碼生效不了。

有不足之處還請指出QAQ