仿jquery插件官网头像更换(原创)

 查看演示  website  立即下载

使用方法

发布时间：2018-1-25 23:41

首先引入jquery:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

js

<script type="text/javascript">
	$(".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.length;i++){
		$li[i].index=i;
		$li[i].onclick=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);
	})
</script>

PREVIOUS:
NEXT:
jQuery滑块验证（原创）
类星球高科技旋转动画(原创)