先展示一下效果圖：
檔案預覽效果：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 =https://www.cnblogs.com/2979100039-qq-con/p/ $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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/51711.html
標籤：Html/Css
上一篇：建立個人博客配置推薦