插件描述:一款简单实用的头像更换插件内附有ajax无刷新代码
使用方法
发布时间:2018-1-25 23:41
首先引入jquery:
js
$(".close,.gb").click(function(){
$(".pic_box").animate({
'top':'-1000px'
},500);
}),
$(".my_box").click(function(){
$(".pic_box").animate({
'top':'15px',
},300);
}),
$(".queren").click(function(){
var src = $(".jide").val();
//$.ajax与index.php交互,在php中判断文件,保存至数据库即可
/*if(src != ""){
$.ajax({
url:"index.php",
type:'post',
data:{'imgsrc':src},
success:function(data){
$(".my_pic").attr('src',src);
$(".pic_box").animate({
'top':'-1000px'
},500);
console.log(data);
}
})
}else{
return false;
}*/
/**
* 后台我是用Thinkphp框架写的代码如下
$show=M('user')->getByusername($_SESSION['_username']);
if(!empty($_POST['imgsrc'])){
$_POST['id']=$show['id'];
$x=$info->create();
$res=$info->save();
if($res){
echo json_encode($_POST['imgsrc']);
}
}
*/
//效果展示,在服务器中把这一段删除,用上面那一段
if(src != ""){
$(".my_pic").attr('src',src);
$(".pic_box").animate({
'top':'-1000px'
},500);
}else{
return false;
}
});
var $box = document.getElementById('pic_box');
var $li = $box.getElementsByTagName('li');
var index = 0;
for(var i=0;i
$li[i].index=i;
$li[i].οnclick=function(){
$li[index].style.borderRadius="15%";
this.style.borderRadius="50%";
index = this.index;
}
}
$(".pic_box li img").click(function(){
var src=$(this).attr("src");
$(".jide").val(src);
})